vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: kanban style (#26538)

Browse source 
* fix(Kanban): hide sidebar toggle

* fix(Kanban): toggle full-width if more than five columns are visible

* fix(Kanban): show correct cursor on column header

* fix(Kanban): increase column height, add margin

* fix(Kanban): increase card padding

* feat(Kanban): set column background based on indicator

* fix(Kanban): add-button background color

* feat(Kanban): grow columns if there's leftover space

* fix(Kanban): space between columns
This commit is contained in:
Raffael Meyer 2024-05-24 10:02:56 +02:00 • committed by GitHub
parent 3e8765d5d1
commit 551a520052
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 11 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frappe/public/js/frappe/views/kanban/kanban_column.html
View file

@ -1,4 +1,4 @@
<div class="kanban-column" data-column-value="{{title}}">
<div class="kanban-column" data-column-value="{{title}}" style="background-color: var(--bg-{{indicator}});">
<div class="kanban-column-header">
<span class="kanban-column-title">
<span class="indicator-pill {{indicator}}"></span>

5
frappe/public/js/frappe/views/kanban/kanban_view.js
View file

@ -136,10 +136,13 @@ frappe.views.KanbanView = class KanbanView extends frappe.views.ListView {
this.hide_card_layout = true;
this.hide_sort_selector = true;
super.setup_page();
this.page.disable_sidebar_toggle = true;
this.page.setup_sidebar_toggle();
}
setup_view() {
if (this.board.columns.length > 5) {
if (this.board.columns.filter((col) => col.status !== "Archived").length > 5) {
this.page.container.addClass("full-width");
}
this.setup_realtime_updates();

16
frappe/public/scss/desk/kanban.scss
View file

@ -15,6 +15,7 @@
.kanban {
display: flex;
gap: 0.5em;
overflow-y: hidden;
-ms-overflow-style: none; /* IE and Edge */
@ -27,19 +28,17 @@
.kanban-column {
@include transition();
flex: 0 0 260px;
max-width: 260px;
flex: 1 0 260px;
border-radius: var(--border-radius);
padding: var(--padding-md);
min-height: calc(100vh - 250px);
max-height: calc(100vh - var(--navbar-height) - var(--page-bottom-margin) - 80px);
min-height: calc(100vh - 150px);
.add-card {
@include flex(flex, center, center, null);
@include transition();
color: var(--text-light);
background-color: var(--kanban-new-card-bg);
background-color: var(--bg-color);
height: 27px;
font-size: var(--text-md);
margin-bottom: var(--margin-sm);
@ -105,10 +104,6 @@
margin: 0;
}
}
&:hover {
cursor: pointer;
}
}
.kanban-column-title {
@ -123,6 +118,7 @@
.kanban-title {
@include get_textstyle("lg", "semibold");
margin-left: var(--margin-sm);
cursor: grab;
}
}
@ -182,7 +178,7 @@
.kanban-card-body {
cursor: grab;
padding: var(--padding-sm);
padding: var(--padding-md);
.kanban-title-area {
margin-bottom: 12px;