From dd88eb4cc191a06f7eb84213b026dfb93546f245 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Thu, 24 Jan 2019 12:09:23 +0100 Subject: swimlane-view: have the swimlane header horizontal This allows to use the header as a separator between swimlanes. This will be most useful when we can set the background color of these headers. --- client/components/lists/list.styl | 1 - 1 file changed, 1 deletion(-) (limited to 'client/components/lists/list.styl') diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 72cb19f4..ec835961 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -10,7 +10,6 @@ // transparent, because that won't work during a list drag. background: darken(white, 13%) border-left: 1px solid darken(white, 20%) - border-bottom: 1px solid #CCC padding: 0 float: left -- cgit v1.2.3-1-g7c22 From 78c779faafad2010842bfccca9ef5c483530c892 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Thu, 24 Jan 2019 09:13:49 +0100 Subject: client: lists headers: use padding instead of margin No visual changes but allows to set a background color to the list header. --- client/components/lists/list.styl | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'client/components/lists/list.styl') diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index ec835961..c2bfa3db 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -45,7 +45,7 @@ .list-header flex: 0 0 auto - margin: 20px 12px 4px + padding: 20px 12px 4px position: relative min-height: 20px @@ -73,10 +73,10 @@ .list-header-menu position: absolute - padding: 7px + padding: 27px 19px margin-top: 1px - top: -@padding - right: -@padding + top: -7px + right: -7px .list-header-plus-icon color: #a6a6a6 -- cgit v1.2.3-1-g7c22 From d0a9d8c581f9356f5e72ccb698fc3963c59e96cd Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Fri, 25 Jan 2019 15:56:40 +0100 Subject: colors: add per list color Hamburger menu only. Note that I am definitively not responsible for the resulting Christmas tree. fixes #328 --- client/components/lists/list.styl | 81 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) (limited to 'client/components/lists/list.styl') diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index c2bfa3db..91823bdb 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -197,3 +197,84 @@ .search-card-results max-height: 250px overflow: hidden + +list-header-color(background, color...) + background: background !important + if color + color: color !important //overwrite text for better visibility + +.list-header-white + list-header-color(#ffffff, #4d4d4d) //Black text for better visibility + border: 1px solid #eee + +.list-header-green + list-header-color(#3cb500, #ffffff) //White text for better visibility + +.list-header-yellow + list-header-color(#fad900, #4d4d4d) //Black text for better visibility + +.list-header-orange + list-header-color(#ff9f19, #4d4d4d) //Black text for better visibility + +.list-header-red + list-header-color(#eb4646, #ffffff) //White text for better visibility + +.list-header-purple + list-header-color(#a632db, #ffffff) //White text for better visibility + +.list-header-blue + list-header-color(#0079bf, #ffffff) //White text for better visibility + +.list-header-pink + list-header-color(#ff78cb, #4d4d4d) //Black text for better visibility + +.list-header-sky + list-header-color(#00c2e0, #ffffff) //White text for better visibility + +.list-header-black + list-header-color(#4d4d4d, #ffffff) //White text for better visibility + +.list-header-lime + list-header-color(#51e898, #4d4d4d) //Black text for better visibility + +.list-header-silver + list-header-color(unset, #4d4d4d) //Black text for better visibility + +.list-header-peachpuff + list-header-color(#ffdab9, #4d4d4d) //Black text for better visibility + +.list-header-crimson + list-header-color(#dc143c, #ffffff) //White text for better visibility + +.list-header-plum + list-header-color(#dda0dd, #4d4d4d) //Black text for better visibility + +.list-header-darkgreen + list-header-color(#006400, #ffffff) //White text for better visibility + +.list-header-slateblue + list-header-color(#6a5acd, #ffffff) //White text for better visibility + +.list-header-magenta + list-header-color(#ff00ff, #ffffff) //White text for better visibility + +.list-header-gold + list-header-color(#ffd700, #4d4d4d) //Black text for better visibility + +.list-header-navy + list-header-color(#000080, #ffffff) //White text for better visibility + +.list-header-gray + list-header-color(#808080, #ffffff) //White text for better visibility + +.list-header-saddlebrown + list-header-color(#8b4513, #ffffff) //White text for better visibility + +.list-header-paleturquoise + list-header-color(#afeeee, #4d4d4d) //Black text for better visibility + +.list-header-mistyrose + list-header-color(#ffe4e1, #4d4d4d) //Black text for better visibility + +.list-header-indigo + list-header-color(#4b0082, #ffffff) //White text for better visibility -- cgit v1.2.3-1-g7c22 From 97d95b4bcbcab86629e368ea41bb9f00450b21f6 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Fri, 25 Jan 2019 15:58:52 +0100 Subject: ui: lists: make sure all lists boxes are the same height When `Show card count` is enabled, the lists with the card counts have two lines of text while the lists without have only one. This results in the box around the list headers are not of the same size and this is visible when setting a color to the list. --- client/components/lists/list.styl | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'client/components/lists/list.styl') diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 91823bdb..c12a2c73 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -43,12 +43,16 @@ background: white margin: -3px 0 8px +.list-header-card-count + height: 35px + .list-header flex: 0 0 auto padding: 20px 12px 4px position: relative min-height: 20px + &.ui-sortable-handle cursor: grab @@ -67,6 +71,7 @@ text-overflow: ellipsis word-wrap: break-word + .list-header-watch-icon padding-left: 10px color: #a6a6a6 -- cgit v1.2.3-1-g7c22 From 33977b2282d8891bf507c4d9a1502c644afd6352 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Fri, 25 Jan 2019 18:11:40 +0100 Subject: lists-color: only colorize the bottom border And make the background clearer to visually separate the header from the list of cards --- client/components/lists/list.styl | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'client/components/lists/list.styl') diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index c12a2c73..51ade73c 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -46,11 +46,19 @@ .list-header-card-count height: 35px +.list-header-add + flex: 0 0 auto + padding: 20px 12px 4px + position: relative + min-height: 20px + .list-header flex: 0 0 auto padding: 20px 12px 4px position: relative min-height: 20px + background-color: #e4e4e4; + border-bottom: 6px solid #e4e4e4; &.ui-sortable-handle @@ -204,9 +212,7 @@ overflow: hidden list-header-color(background, color...) - background: background !important - if color - color: color !important //overwrite text for better visibility + border-bottom: 6px solid background .list-header-white list-header-color(#ffffff, #4d4d4d) //Black text for better visibility -- cgit v1.2.3-1-g7c22