From 7c2337597eecef6b5ce34a9fb8f3615a5dc012a2 Mon Sep 17 00:00:00 2001 From: prssanna Date: Wed, 8 Jul 2020 16:11:42 +0530 Subject: [PATCH] feat: kanban view style update --- .../js/frappe/views/kanban/kanban_board.html | 22 +- .../js/frappe/views/kanban/kanban_board.js | 38 ++- .../js/frappe/views/kanban/kanban_card.html | 2 +- .../js/frappe/views/kanban/kanban_column.html | 35 +- frappe/public/less/kanban.less | 322 +++++++++--------- frappe/public/scss/kanban.scss | 229 +++++++++++++ frappe/public/scss/main.scss | 1 + 7 files changed, 447 insertions(+), 202 deletions(-) create mode 100644 frappe/public/scss/kanban.scss diff --git a/frappe/public/js/frappe/views/kanban/kanban_board.html b/frappe/public/js/frappe/views/kanban/kanban_board.html index 2265ee041c..e575a6f1cf 100644 --- a/frappe/public/js/frappe/views/kanban/kanban_board.html +++ b/frappe/public/js/frappe/views/kanban/kanban_board.html @@ -1,13 +1,13 @@
-
-
- {{ __("Add a column") }} -
-
- -
-
- +
+
+ + {{ __("Add Column") }} +
+
+ +
+
+
\ No newline at end of file diff --git a/frappe/public/js/frappe/views/kanban/kanban_board.js b/frappe/public/js/frappe/views/kanban/kanban_board.js index d97cb5f68b..245d1116ac 100644 --- a/frappe/public/js/frappe/views/kanban/kanban_board.js +++ b/frappe/public/js/frappe/views/kanban/kanban_board.js @@ -350,12 +350,12 @@ frappe.provide("frappe.views"); if (!archived_columns.length) return; var options = archived_columns.reduce(function(a, b) { - return a + "
  • " + + return a + `
  • " + "" + __(b.title) + "" + "
    • "; + + __('Restore') + "`; }, ""); var $dropdown = $("
    " + "" + @@ -520,7 +520,7 @@ frappe.provide("frappe.views"); html += indicators.reduce(function(prev, curr) { return prev + '
    '; + class="btn btn-default btn-xs indicator-pill ' + curr + '">
    '; }, ""); html += ''; self.$kanban_column.find(".column-options .dropdown-menu") @@ -555,10 +555,17 @@ frappe.provide("frappe.views"); function render_card_meta() { var html = ""; if (card.comment_count > 0) - html += '' + - ' ' + card.comment_count + - ''; - html += get_assignees_html(); + html += + ` + + + + ${card.comment_count} + `; + + assignees_html = get_assignees_html(); + + html += `${assignees_html}`; if (card.color && frappe.ui.color.validate_hex(card.color)) { const $div = $('
    '); @@ -578,7 +585,7 @@ frappe.provide("frappe.views"); function add_task_link() { let taskLink = frappe.utils.get_form_link(card.doctype, card.name); - self.$card.find('.kanban-card-redirect').attr('href', taskLink); + self.$card.find('.kanban-card-redirect').attr('href', taskLink); } function refresh_dialog() { @@ -597,8 +604,15 @@ frappe.provide("frappe.views"); function make_assignees() { var d = self.edit_dialog; - var html = get_assignees_html() + '\ - '; + var html = + ` + ${get_assignees_html()} + + + + + + `; d.$wrapper.find("[data-fieldname='assignees'] .control-input-wrapper").empty().append(html); d.$wrapper.find(".add-assignment").on("click", function() { @@ -611,9 +625,7 @@ frappe.provide("frappe.views"); } function get_assignees_html() { - return card.assigned_list.reduce(function(a, b) { - return a + frappe.avatar(b); - }, ""); + return frappe.avatar_group(card.assigned_list, 3); } function show_assign_to_dialog() { diff --git a/frappe/public/js/frappe/views/kanban/kanban_card.html b/frappe/public/js/frappe/views/kanban/kanban_card.html index 7f2d8fb619..159ed87f76 100644 --- a/frappe/public/js/frappe/views/kanban/kanban_card.html +++ b/frappe/public/js/frappe/views/kanban/kanban_card.html @@ -1,7 +1,7 @@
    -
    +
    {{ title }}
    diff --git a/frappe/public/js/frappe/views/kanban/kanban_column.html b/frappe/public/js/frappe/views/kanban/kanban_column.html index f9c7ac268d..5f51b49ec7 100644 --- a/frappe/public/js/frappe/views/kanban/kanban_column.html +++ b/frappe/public/js/frappe/views/kanban/kanban_column.html @@ -1,23 +1,26 @@
    -
    - {{ __(title) }} -
    - - +
    + + + {{ __(title) }} + +
    + + +
    +
    +
    +
    + + {{ __("Add " + doctype) }}
    - -
    - -
    -
    - {{ __("Add " + doctype) }} -
    diff --git a/frappe/public/less/kanban.less b/frappe/public/less/kanban.less index 1878e39421..56eab7485a 100644 --- a/frappe/public/less/kanban.less +++ b/frappe/public/less/kanban.less @@ -1,195 +1,195 @@ -@import "variables.less"; +// @import "variables.less"; -.kanban { - min-height: ~"calc(100vh - 252px)"; - background-color: @light-bg; - display: flex; - overflow: auto; +// .kanban { +// min-height: ~"calc(100vh - 252px)"; +// background-color: @light-bg; +// display: flex; +// overflow: auto; - .kanban-column { - flex: 0 0 230px; - max-width: 230px; - background-color: @light-bg; - border-right: 1px solid @border-color; - padding: 15px; +// .kanban-column { +// flex: 0 0 230px; +// max-width: 230px; +// background-color: @light-bg; +// border-right: 1px solid @border-color; +// padding: 15px; - &.add-new-column { - order: 1; - border-right: none; - } - } +// &.add-new-column { +// order: 1; +// border-right: none; +// } +// } - .kanban-column-title { - margin-top: 0; - margin-bottom: 15px; - position: relative; - font-weight: bold; - font-size: 12px; +// .kanban-column-title { +// margin-top: 0; +// margin-bottom: 15px; +// position: relative; +// font-weight: bold; +// font-size: 12px; - .column-options { +// .column-options { - .button-group { - display: flex; - padding: 12px 14px; +// .button-group { +// display: flex; +// padding: 12px 14px; - .btn.indicator { - flex: 1; - } - } +// .btn.indicator { +// flex: 1; +// } +// } - .indicator::before { - margin: 0; - } - } +// .indicator::before { +// margin: 0; +// } +// } - &:hover { - cursor: pointer; - } - } +// &:hover { +// cursor: pointer; +// } +// } - .sortable-ghost > .kanban-card:not(.add-card) { - background: #ccc !important; - color: transparent; +// .sortable-ghost > .kanban-card:not(.add-card) { +// background: #ccc !important; +// color: transparent; - * { - background: transparent !important; - color: transparent !important; - } +// * { +// background: transparent !important; +// color: transparent !important; +// } - } +// } - .kanban-card { - background-color: #fff; - box-shadow: 0 1px 3px rgba(0,0,0,0.30); - border-radius: 2px; - padding: 6px 6px 6px 8px; - margin-top: 10px; +// .kanban-card { +// background-color: #fff; +// box-shadow: 0 1px 3px rgba(0,0,0,0.30); +// border-radius: 2px; +// padding: 6px 6px 6px 8px; +// margin-top: 10px; - &.add-card { - background-color: transparent; - box-shadow: none; - color: @text-muted; +// &.add-card { +// background-color: transparent; +// box-shadow: none; +// color: @text-muted; - &:hover { - box-shadow: none; - color: @text-color; - cursor: pointer; - } +// &:hover { +// box-shadow: none; +// color: @text-color; +// cursor: pointer; +// } - .octicon-plus { - top: -1px; - font-size: 1em; - margin-right: 5px; - position:relative; - } - } - } +// .octicon-plus { +// top: -1px; +// font-size: 1em; +// margin-right: 5px; +// position:relative; +// } +// } +// } - .kanban-card-wrapper { - position: relative; +// .kanban-card-wrapper { +// position: relative; - .kanban-card-redirect { - display: block; +// .kanban-card-redirect { +// display: block; - &:hover, - &:focus { - text-decoration: none; - } - } - } +// &:hover, +// &:focus { +// text-decoration: none; +// } +// } +// } - .kanban-card:hover, .new-card-area, .edit-card-area { - box-shadow: 0 2px 4px rgba(0,0,0,0.30); - } +// .kanban-card:hover, .new-card-area, .edit-card-area { +// box-shadow: 0 2px 4px rgba(0,0,0,0.30); +// } - .kanban-card-wrapper:hover { - cursor: pointer; - text-decoration: none; +// .kanban-card-wrapper:hover { +// cursor: pointer; +// text-decoration: none; - .kanban-card-edit { - opacity: 1; - } - } +// .kanban-card-edit { +// opacity: 1; +// } +// } - .kanban-card-title { - max-width: 90%; - font-size: 12px; - } +// .kanban-card-title { +// max-width: 90%; +// font-size: 12px; +// } - .kanban-card-edit { - position: absolute; - right: 10px; - opacity: 0; - transition: 0.2s ease; - } +// .kanban-card-edit { +// position: absolute; +// right: 10px; +// opacity: 0; +// transition: 0.2s ease; +// } - .new-card-area, .edit-card-area { - margin-bottom: 10px; +// .new-card-area, .edit-card-area { +// margin-bottom: 10px; - textarea { - font-size: 12px; - resize: none; - border: none; - background: none; - overflow: hidden; - word-wrap: break-word; - width: 100%; +// textarea { +// font-size: 12px; +// resize: none; +// border: none; +// background: none; +// overflow: hidden; +// word-wrap: break-word; +// width: 100%; - &:focus { - outline: none; - } - } - } +// &:focus { +// outline: none; +// } +// } +// } - .compose-column-form { - .new-column-title { - background: transparent; - border: none; - outline: none; - } - } +// .compose-column-form { +// .new-column-title { +// background: transparent; +// border: none; +// outline: none; +// } +// } - .add-new-column a:hover { - color: @text-color !important; - } +// .add-new-column a:hover { +// color: @text-color !important; +// } - .kanban-card-meta { - margin-top: 8px; - text-align: right; +// .kanban-card-meta { +// margin-top: 8px; +// text-align: right; - .avatar { - width: 16px; - height: 16px; - } - } +// .avatar { +// width: 16px; +// height: 16px; +// } +// } - .kanban-empty-state { - width: 100%; - line-height: 400px; - } -} +// .kanban-empty-state { +// width: 100%; +// line-height: 400px; +// } +// } -body[data-route*="Kanban"] { - .modal .add-assignment:hover { - // border-color: @text-color; - i { - color: @text-color !important; - } - } -} +// body[data-route*="Kanban"] { +// .modal .add-assignment:hover { +// // border-color: @text-color; +// i { +// color: @text-color !important; +// } +// } +// } -.edit-card-title { - .h4 { - margin-top: 5px; - margin-bottom: 5px; - } - span:hover { - background-color: @light-yellow; - cursor: pointer; - } - input { - border: none; - outline: none; - width: 100%; - } -} \ No newline at end of file +// .edit-card-title { +// .h4 { +// margin-top: 5px; +// margin-bottom: 5px; +// } +// span:hover { +// background-color: @light-yellow; +// cursor: pointer; +// } +// input { +// border: none; +// outline: none; +// width: 100%; +// } +// } \ No newline at end of file diff --git a/frappe/public/scss/kanban.scss b/frappe/public/scss/kanban.scss new file mode 100644 index 0000000000..34a65dc30c --- /dev/null +++ b/frappe/public/scss/kanban.scss @@ -0,0 +1,229 @@ +.kanban { + min-height: #{"calc(100vh - 252px)"}; + // background-color: @light-bg; + display: flex; + overflow: auto; + + .kanban-column { + flex: 0 0 290px; + max-width: 290px; + border-right: 1px solid $border-color; + padding: 15px; + border-radius: $border-radius; + + &.add-new-column { + order: 1; + border-right: none; + background-color: var(--grey-50); + } + } + + .kanban-column-header { + margin-top: 0; + margin-bottom: 15px; + position: relative; + font-weight: 500; + font-size: 12px; + display: flex; + justify-content: space-between; + // align-items: center; + .indicator-pill { + padding: 2px 8px; + width: 20px; + height: 20px; + + &:before{ + margin-right: 0px; + } + } + + .column-options { + + .button-group { + display: flex; + padding: 8px; + + div.indicator-pill { + margin: 0 5px; + } + + .btn.indicator { + flex: 1; + } + } + + .indicator::before { + margin: 0; + } + } + + &:hover { + cursor: pointer; + } + } + + .kanban-column-title { + font-size: $font-size-lg; + color: var(--grey-900); + display: flex; + align-items: center; + font-weight: normal; + + // margin-left: 10px; + .kanban-title { + margin-left: 10px; + } + } + + .sortable-ghost > .kanban-card:not(.add-card) { + background: #ccc !important; + color: transparent; + + * { + background: transparent !important; + color: transparent !important; + } + + } + + .kanban-card { + background-color: #fff; + background: #FFFFFF; + box-shadow: 0px 0px 2px rgba(17, 43, 66, 0.16), 0px 1px 5px rgba(17, 43, 66, 0.1); + border-radius: 8px; + padding: 10px 14px; + margin-top: 10px; + width: 260px; + min-height: 100px; + display: flex; + justify-content: space-between; + flex-direction: column; + } + + .add-card { + justify-content: center; + display: flex; + align-items: center; + color: var(--grey-700); + background-color: var(--grey-100); + box-shadow: none; + height: 28px; + border-radius: 8px; + &:hover { + box-shadow: none; + color: $text-color; + cursor: pointer; + } + + .octicon-plus { + top: -1px; + font-size: 1em; + margin-right: 5px; + position:relative; + } + } + + .kanban-card-wrapper { + position: relative; + + .kanban-card-redirect { + display: block; + + &:hover, + &:focus { + text-decoration: none; + } + } + } + + .kanban-card:hover, .new-card-area, .edit-card-area { + box-shadow: 0 2px 4px rgba(0,0,0,0.30); + } + + .kanban-card-wrapper:hover { + cursor: pointer; + text-decoration: none; + + .kanban-card-edit { + opacity: 1; + } + } + + .kanban-card-title { + max-width: 90%; + font-size: $font-size-base; + } + + .kanban-card-edit { + position: absolute; + right: 10px; + opacity: 0; + transition: 0.2s ease; + } + + .new-card-area, .edit-card-area { + margin-bottom: 10px; + + textarea { + font-size: 12px; + resize: none; + border: none; + background: none; + overflow: hidden; + word-wrap: break-word; + width: 100%; + + &:focus { + outline: none; + } + } + } + + .compose-column-form { + .new-column-title { + background: transparent; + border: none; + outline: none; + } + } + + .add-new-column a:hover { + color: $text-color !important; + } + + .kanban-card-meta { + .kanban-assignments { + float: right; + } + } + + .kanban-empty-state { + width: 100%; + line-height: 400px; + } +} + +body[data-route*="Kanban"] { + .modal .add-assignment:hover { + // border-color: @text-color; + i { + color: $text-color !important; + } + } +} + +.edit-card-title { + .h4 { + margin-top: 5px; + margin-bottom: 5px; + } + span:hover { + // background-color: @light-yellow; + cursor: pointer; + } + input { + border: none; + outline: none; + width: 100%; + } +} \ No newline at end of file diff --git a/frappe/public/scss/main.scss b/frappe/public/scss/main.scss index 0a8ca1d7ab..f2ed13539f 100644 --- a/frappe/public/scss/main.scss +++ b/frappe/public/scss/main.scss @@ -21,6 +21,7 @@ @import "report"; @import "frappe-datatable"; @import "image-view"; +@import "kanban"; @import "frappe/public/css/font-awesome"; @import "multilevel-dropdown";