From db3e7aa5de1374f717af6a53ff9e0f62372cf620 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Wed, 11 May 2022 15:43:34 +0100 Subject: [PATCH 1/4] Use light theme colors in dark theme for more highlight --- .../src/less2/include/colortheme-dark.less | 6 ++++-- customize.dist/src/less2/include/colortheme.less | 1 + www/kanban/app-kanban.less | 16 ++++++++++++++-- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 64b4c296d..7c9008884 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -379,8 +379,10 @@ @cp_kanban-tags-bg: @cryptpad_color_grey_700; @cp_kanban-add-hover: fade(@cryptpad_color_black, 10%); @cp_kanban-trash-bg: @cryptpad_color_warn_red; -@cp_kanban-color0: @cryptpad_color_grey_600; -@cp_kanban-colors: @cp_palette-dark; +@cp_kanban-color0: @cryptpad_color_grey_400; +@cp_kanban-colors: @cp_palette; +@cp_kanban-card-colors: @cp_palette-dark; + // Notifications @cp_notif-hover: fade(@cryptpad_color_black, 10%); diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 845dd992d..cb694eb17 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -380,6 +380,7 @@ @cp_kanban-trash-bg: @cryptpad_color_warn_red; @cp_kanban-color0: @cryptpad_color_grey_400; @cp_kanban-colors: @cp_palette; +@cp_kanban-card-colors: @cp_palette; // Notifications @cp_notif-hover: fade(@cryptpad_color_black, 10%); diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index ffc8f327d..6391b5b42 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -25,8 +25,11 @@ .kanban-board-header { background-color: @palette0; - color: @cp_kanban-fg; + color: @cryptpad_color_grey_800; border-radius: @variables_radius @variables_radius 0px 0px; + button.kanban-edit-item { + color: @cryptpad_color_grey_800; + } } .kanban-board { .kanban-board-inner { @@ -40,7 +43,7 @@ } color: @cp_kanban-fg; button { - color: @cp_kanban-fg; + color: @cryptpad_text_col; } } @@ -60,6 +63,15 @@ } } } + .kanban-card-colors(@kanban-card-colors; @index) when (@index > 0){ + // loop through the @colors + .kanban-colors(@kanban-card-colors; (@index - 1)); + @color: extract(@kanban-card-colors, @index); + // make a numbered class selector for each color + .cp-kanban-card-color@{index}{ + background-color: @color !important; + } + } // call the loop .kanban-colors(@kanban-colors; length(@kanban-colors)); From 0679ed68330120939ff73dc9708f1aee6745f9e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Thu, 12 May 2022 09:55:11 +0100 Subject: [PATCH 2/4] Use dark palette for Kanban cards in dark theme --- www/kanban/app-kanban.less | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 6391b5b42..d871a45ae 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -22,6 +22,7 @@ @palette0: @cp_kanban-color0; // Default bg color for header @kanban-colors: @cp_kanban-colors; + @kanban-card-colors: @cp_kanban-card-colors; .kanban-board-header { background-color: @palette0; @@ -65,15 +66,21 @@ } .kanban-card-colors(@kanban-card-colors; @index) when (@index > 0){ // loop through the @colors - .kanban-colors(@kanban-card-colors; (@index - 1)); + .kanban-card-colors(@kanban-card-colors; (@index - 1)); @color: extract(@kanban-card-colors, @index); // make a numbered class selector for each color - .cp-kanban-card-color@{index}{ - background-color: @color !important; + // .cp-kanban-card-color@{index}{ + // background-color: @color !important; + // } + .cp-kanban-palette-color@{index}{ + &.kanban-item { + background-color: @color !important; + } } } // call the loop .kanban-colors(@kanban-colors; length(@kanban-colors)); + .kanban-card-colors(@kanban-card-colors; length(@kanban-card-colors)); .cp-kanban-edit-modal { display: flex; @@ -133,6 +140,9 @@ line-height: 30px; color: @cp_kanban-fg; border: 1px solid fade(@cp_kanban-fg, 40%); + &.fa-check { // tick on selected color + color: @cryptpad_color_grey_800; // XXX review if we show dark palette in card picker + } } } #cp-kanban-edit-tags { From aae87e75183c7693c3998491abd4506fae15898f Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 12 May 2022 15:25:10 +0200 Subject: [PATCH 3/4] Fix color picker in kanban --- www/kanban/app-kanban.less | 6 ++++++ www/kanban/inner.js | 13 +++++++++++++ 2 files changed, 19 insertions(+) diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index d871a45ae..8d833237a 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -59,6 +59,9 @@ // make a numbered class selector for each color .cp-kanban-palette-color@{index}{ background-color: @color !important; + &.cp-kanban-palette-board { + background-color: @color !important; + } &.kanban-board-inner { background-color: fade(@color, 50%) !important; } @@ -73,6 +76,9 @@ // background-color: @color !important; // } .cp-kanban-palette-color@{index}{ + &.cp-kanban-palette-card { + background-color: @color !important; + } &.kanban-item { background-color: @color !important; } diff --git a/www/kanban/inner.js b/www/kanban/inner.js index c3de0e0e8..75e01e658 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -363,6 +363,18 @@ define([ var palette = ['']; for (var i=1; i<=8; i++) { palette.push('color'+i); } var selectedColor = ''; + var resetThemeClass = function () { + $colors.find('.cp-kanban-palette').each(function (i, el) { + var $c = $(el); + $c.removeClass('cp-kanban-palette-card'); + $c.removeClass('cp-kanban-palette-board'); + if (isBoard) { + $c.addClass('cp-kanban-palette-board'); + } else { + $c.addClass('cp-kanban-palette-card'); + } + }); + }; palette.forEach(function (color) { var $color = $(h('span.cp-kanban-palette.fa')); $color.addClass('cp-kanban-palette-'+(color || 'nocolor')); @@ -383,6 +395,7 @@ define([ return selectedColor; }, setValue: function (color) { + resetThemeClass(); $colors.find('.cp-kanban-palette').removeClass('fa-check'); var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor')); $col.addClass('fa-check'); From ab137ef1753bc1a3d05c9f884952730ea86ea33b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Thu, 12 May 2022 14:37:28 +0100 Subject: [PATCH 4/4] Revert color of tick in colorpicker --- www/kanban/app-kanban.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 8d833237a..fd1e93458 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -147,7 +147,7 @@ color: @cp_kanban-fg; border: 1px solid fade(@cp_kanban-fg, 40%); &.fa-check { // tick on selected color - color: @cryptpad_color_grey_800; // XXX review if we show dark palette in card picker + color: @cryptpad_text_col; } } }