From 67db42e99d9a7939785e1de5447d40aa7ceecfa1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 16 Nov 2017 16:28:25 +0100 Subject: [PATCH 1/6] Add app content list MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 155 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index 8f49df7fdaf8c..a730d38369932 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -906,3 +906,158 @@ kbd { } } + + +#app-content-wrapper { + display: flex; +} +.app-content-list { + width: 300px; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + border-right: 1px solid nc-darken($color-main-background, 8%); + display: flex; + flex-direction: column; + transition: transform 250ms ease-in-out; + + .app-content-list-item { + position: relative; + height: 68px; + border-top: 1px solid nc-darken($color-main-background, 8%); + cursor: pointer; + padding: 10px 7px; + display: flex; + flex-wrap: wrap; + align-items: center; + + &:hover, &:focus, + &.active { + background-color: nc-darken($color-main-background, 6%); + } + + .app-content-list-item-icon { + position: absolute; + left: 6px; + top: 14px; + display: inline-block; + height: 40px; + width: 40px; + line-height: 40px; + border-radius: 50%; + vertical-align: middle; + margin-right: 10px; + color: #fff; + text-align: center; + font-size: 1.5em; + text-transform: capitalize; + object-fit: cover; + user-select: none; + } + + .app-content-list-item-star { + position: absolute; + display: none; /* change to inline-block when we implement it */ + left: 16px; + top: 28px; + padding: 20px; + background-size: 16px; + z-index: 100; + } + + .app-content-list-item-line-one, + .app-content-list-item-line-two { + display: block; + padding-left: 50px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + order: 1; + flex: 1 1 0; + padding-right: 10px; + } + + .app-content-list-item-line-two { + opacity: .5; + order: 3; + flex: 1 0 calc(100% - 24px); + } + + .app-content-list-item-details { + order: 2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100px; + opacity: 0.5; + user-select: none; + } + + [class^='icon-'], + [class*=' icon-'] { + order: 4; + width: 24px; + height: 24px; + opacity: 0.3; + &:hover, &:focus { + opacity: 0.7; + } + } + } +} +/* App content */ +.app-content-detail { + width: 70%; + + #app-navigation-toggle-back { + display: none; + } +} + +/* Mobile width < 768px */ +@media only screen and (max-width: 768px) { + + /* full width for message list on mobile */ + .app-content-list { + width: 100%; + background: $color-main-background; + position: relative; + z-index: 100; + } + + /* overlay message detail on top of message list */ + .app-content-detail { + background: $color-main-background; + width: 100%; + left: 0; + height: 100%; + top: 0; + box-shadow: 0 0 100px rgba(100, 100, 100, .9); + position: absolute; + } + + /* Show app details page */ + #app-content.showdetails { + #app-navigation-toggle { + transform: translateX(-44px); + } + #app-navigation-toggle-back { + position: fixed; + display: inline-block !important; + top: 45px; + left: 0; + width: 44px; + height: 44px; + z-index: 149; + background-color: rgba(255, 255, 255, .7); + cursor: pointer; + opacity: .6; + transform: rotate(90deg); + } + .app-content-list { + transform: translateX(-100%); + } + } + + /* end of media query */ +} From 627293adc2b985707f4c3f75e78abddd6d01ce5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 16 Nov 2017 19:18:57 +0100 Subject: [PATCH 2/6] Checkboxes and various design fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 71 +++++++++++++++++++++++++++++++++------------- 1 file changed, 51 insertions(+), 20 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index a730d38369932..73274a34edb1f 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -913,7 +913,7 @@ kbd { } .app-content-list { width: 300px; - height: 100%; + min-height: 100%; overflow-x: hidden; overflow-y: auto; border-right: 1px solid nc-darken($color-main-background, 8%); @@ -921,6 +921,30 @@ kbd { flex-direction: column; transition: transform 250ms ease-in-out; + /* Icon fixes */ + [class^='icon-'], + [class*=' icon-'] { + order: 4; + width: 24px; + height: 24px; + opacity: 0.3; + &:hover, &:focus { + opacity: 0.7; + } + &[class^='icon-star'], + &[class*=' icon-star'] { + opacity: 0.7; + &:hover, &:focus { + opacity: 1 ; + } + + } + &.icon-starred { + opacity: 1 ; + } + } + + /* Default item */ .app-content-list-item { position: relative; height: 68px; @@ -936,10 +960,32 @@ kbd { background-color: nc-darken($color-main-background, 6%); } - .app-content-list-item-icon { + .app-content-list-item-checkbox.checkbox + label, + .app-content-list-item-star { position: absolute; - left: 6px; + height: 20px; + width: 20px; + display: flex; + z-index: 50; + + .app-content-list-item-icon { + opacity: .7; + } + } + + .app-content-list-item-checkbox.checkbox + label { top: 14px; + left: 7px; + &::before { + margin: 0; + } + /* Hide the star, priority to the checkbox */ + ~ .app-content-list-item-star { + display: none; + } + } + + .app-content-list-item-icon { + position: absolute; display: inline-block; height: 40px; width: 40px; @@ -956,13 +1002,9 @@ kbd { } .app-content-list-item-star { - position: absolute; - display: none; /* change to inline-block when we implement it */ - left: 16px; - top: 28px; - padding: 20px; + top: 10px; + left: 3px; background-size: 16px; - z-index: 100; } .app-content-list-item-line-one, @@ -992,17 +1034,6 @@ kbd { opacity: 0.5; user-select: none; } - - [class^='icon-'], - [class*=' icon-'] { - order: 4; - width: 24px; - height: 24px; - opacity: 0.3; - &:hover, &:focus { - opacity: 0.7; - } - } } } /* App content */ From 3d063e4dd0f956268473261323b1b79a73c5a8d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 17 Nov 2017 09:05:28 +0100 Subject: [PATCH 3/6] Checkboxes and favourite fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 73274a34edb1f..861c4945fc55a 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -963,8 +963,8 @@ kbd { .app-content-list-item-checkbox.checkbox + label, .app-content-list-item-star { position: absolute; - height: 20px; - width: 20px; + height: 40px; + width: 40px; display: flex; z-index: 50; + .app-content-list-item-icon { @@ -984,6 +984,14 @@ kbd { } } + .app-content-list-item-star { + top: 10px; + left: 3px; + background-size: 16px; + height: 20px; + width: 20px; + } + .app-content-list-item-icon { position: absolute; display: inline-block; @@ -1001,12 +1009,6 @@ kbd { user-select: none; } - .app-content-list-item-star { - top: 10px; - left: 3px; - background-size: 16px; - } - .app-content-list-item-line-one, .app-content-list-item-line-two { display: block; From 1dd8746395434e837d9503b64695048196bc0866 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 20 Nov 2017 13:57:49 +0100 Subject: [PATCH 4/6] Reduce size of date in list Signed-off-by: Jan-Christoph Borchardt --- core/css/apps.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 861c4945fc55a..5e47f75d193a7 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -1033,7 +1033,8 @@ kbd { overflow: hidden; text-overflow: ellipsis; max-width: 100px; - opacity: 0.5; + opacity: .5; + font-size: 80%; user-select: none; } } From 5ea14192ee39dcd26ac527fb74809d2cbcb32bcb Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 20 Nov 2017 13:59:53 +0100 Subject: [PATCH 5/6] Move star to top right instead of top left, fix checkbox overlay Signed-off-by: Jan-Christoph Borchardt --- core/css/apps.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 5e47f75d193a7..ed102a9d8fa75 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -986,7 +986,7 @@ kbd { .app-content-list-item-star { top: 10px; - left: 3px; + left: 32px; background-size: 16px; height: 20px; width: 20px; From a61015d647389a854387204f635f9f85924bdf90 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 20 Nov 2017 14:10:04 +0100 Subject: [PATCH 6/6] Increase clickable area of actions to 44*44px Signed-off-by: Jan-Christoph Borchardt --- core/css/apps.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index ed102a9d8fa75..54f0c47688580 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -927,13 +927,15 @@ kbd { order: 4; width: 24px; height: 24px; - opacity: 0.3; + margin: -10px; + padding: 22px; + opacity: .3; &:hover, &:focus { - opacity: 0.7; + opacity: .7; } &[class^='icon-star'], &[class*=' icon-star'] { - opacity: 0.7; + opacity: .7; &:hover, &:focus { opacity: 1 ; } @@ -990,6 +992,8 @@ kbd { background-size: 16px; height: 20px; width: 20px; + margin: 0; + padding: 0; } .app-content-list-item-icon {