From d9770a1f56f41d0fe3ce929b664463d9b7645182 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 7 Sep 2017 10:14:53 +0200 Subject: [PATCH 01/61] Simplification and reorganisation 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 | 60 ++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 34 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 1e0ea8f625..e3c030ddae 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -100,6 +100,8 @@ kbd { overflow: auto; box-sizing: border-box; > li { + display: inline-flex; + justify-content: space-between; &:focus, &:hover, &.active, @@ -116,6 +118,28 @@ kbd { position: relative; width: 100%; box-sizing: border-box; + > a { + background-size: 16px 16px; + background-position: 14px center; + background-repeat: no-repeat; + display: block; + width: 100%; + line-height: 44px; + min-height: 44px; + padding: 0 12px; + overflow: hidden; + box-sizing: border-box; + white-space: nowrap; + text-overflow: ellipsis; + color: $color-main-text; + opacity: .57; + &:first-child img { + margin-bottom: -3px; + margin-right: 11px; + width: 16px; + margin-left: 2px; + } + } } &.hidden { display: none; @@ -123,13 +147,6 @@ kbd { &.without-app-settings { padding-bottom: 0; } - .active.with-menu > a, - .with-counter > a { - padding-right: 50px; - } - .active.with-menu.with-counter > a { - padding-right: 90px; - } .with-icon a, .app-navigation-entry-loading a { padding-left: 44px; @@ -137,25 +154,6 @@ kbd { background-position: 14px center; background-repeat: no-repeat; } - li > a { - display: block; - width: 100%; - line-height: 44px; - min-height: 44px; - padding: 0 12px; - overflow: hidden; - box-sizing: border-box; - white-space: nowrap; - text-overflow: ellipsis; - color: $color-main-text; - opacity: .57; - } - li > a:first-child img { - margin-bottom: -3px; - margin-right: 11px; - width: 16px; - margin-left: 2px; - } .collapse { display: none; /* hide collapse button initially */ @@ -258,7 +256,7 @@ kbd { opacity: 1; } } - /* counter and actions, legacy code */ + /* counter and actions, legacy code TO BE DELETED */ .utils { position: absolute; padding: 7px 7px 0 0; @@ -290,10 +288,7 @@ kbd { * App navigation utils, buttons and counters for drop down menu */ .app-navigation-entry-utils { - position: absolute; - top: 0; - right: 0; - z-index: 105; + flex-shrink: 0; ul { display: flex !important; align-items: center; @@ -304,9 +299,6 @@ kbd { height: 44px; } } - .active > .app-navigation-entry-utils li { - display: inline-block; - } .app-navigation-entry-utils button { height: 100%; width: 100%; From f11b36de932e0d6c42f0f53d4ad9f9bd6a2fc963 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 7 Sep 2017 10:17:04 +0200 Subject: [PATCH 02/61] Removed unused old vars and reorganize 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 | 41 +++++++++++++++++------------------------ 1 file changed, 17 insertions(+), 24 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index e3c030ddae..12aaa37619 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -141,22 +141,31 @@ kbd { } } } + > { + /* Second level nesting for lists */ + ul ul { + display: none; + li > a { + padding-left: 32px; + } + } + .with-icon ul li { + > a, + &.app-navigation-entry-loading > a { + padding-left: 68px; + background-position: 44px center; + } + } + } &.hidden { display: none; } &.without-app-settings { padding-bottom: 0; } - .with-icon a, - .app-navigation-entry-loading a { - padding-left: 44px; - background-size: 16px 16px; - background-position: 14px center; - background-repeat: no-repeat; - } .collapse { - display: none; /* hide collapse button initially */ + display: none; } .collapsible { > .collapse { @@ -201,22 +210,6 @@ kbd { background-image: -ms-linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%); } } - > { - /* Second level nesting for lists */ - ul ul { - display: none; - li > a { - padding-left: 32px; - } - } - .with-icon ul li { - > a, - &.app-navigation-entry-loading > a { - padding-left: 68px; - background-position: 44px center; - } - } - } > ul .collapsible.open { &:hover, &:focus { From 4d2a7fe32e6a6b4ed3543feeb71d730896b37646 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 7 Sep 2017 10:22:28 +0200 Subject: [PATCH 03/61] Icon auto-padding 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 | 3 +++ 1 file changed, 3 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index 12aaa37619..1c99a80f26 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -139,6 +139,9 @@ kbd { width: 16px; margin-left: 2px; } + &[class*='icon-'] { + padding-left: 44px; + } } } > { From d85781d5f4b7b46496cd93bb31df1d68f7ad2145 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 7 Sep 2017 10:48:38 +0200 Subject: [PATCH 04/61] Allow counter inside a to be clickable 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 | 65 +++++++++++++++++++++++++--------------------- 1 file changed, 36 insertions(+), 29 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 1c99a80f26..f23d1b420f 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -122,7 +122,8 @@ kbd { background-size: 16px 16px; background-position: 14px center; background-repeat: no-repeat; - display: block; + display: inline-flex; + justify-content: space-between; width: 100%; line-height: 44px; min-height: 44px; @@ -142,6 +143,10 @@ kbd { &[class*='icon-'] { padding-left: 44px; } + /* Counter can also be inside the link */ + .app-navigation-entry-utils-counter { + padding-right: 0 !important; + } } } > { @@ -294,38 +299,40 @@ kbd { width: 44px !important; height: 44px; } - } - .app-navigation-entry-utils button { - height: 100%; - width: 100%; - margin: 0; - box-shadow: none; - } - .app-navigation-entry-utils-menu-button { button { - border: 0; - opacity: .5; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - background-image: url('../img/actions/more.svg?v=1'); + height: 100%; + width: 100%; + margin: 0; + box-shadow: none; } - &:hover button, - &:focus button { - background-color: transparent; - opacity: 1; + .app-navigation-entry-utils-menu-button { + button { + border: 0; + opacity: .5; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-image: url('../img/actions/more.svg?v=1'); + } + &:hover button, + &:focus button { + background-color: transparent; + opacity: 1; + } + } + .app-navigation-entry-utils-counter { + overflow: hidden; + text-overflow: hidden; + text-align: right; + font-size: 9pt; + width: 38px; + line-height: 44px; + padding: 0 12px; /* Same padding as all li > a in the app-navigation */ } } - .app-navigation-entry-utils-counter { - overflow: hidden; - text-overflow: hidden; - text-align: right; - font-size: 9pt; - width: 38px; - line-height: 44px; - padding: 0 10px; - } - .app-navigation-entry-utils ul, .app-navigation-entry-menu ul { + + .app-navigation-entry-utils ul, + .app-navigation-entry-menu ul { list-style-type: none; } From 0a67e0e2a8605039d6ef1e7acb109ee1dbf3e364 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 7 Sep 2017 14:46:53 +0200 Subject: [PATCH 05/61] Navigation flex magic 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 | 32 ++++++++++++-------------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index f23d1b420f..4bf547f347 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -101,7 +101,7 @@ kbd { box-sizing: border-box; > li { display: inline-flex; - justify-content: space-between; + flex-wrap: wrap; &:focus, &:hover, &.active, @@ -112,6 +112,15 @@ kbd { box-shadow: inset 2px 0 $color-primary; } } + /* Second level nesting for lists */ + > ul { + display: none; + flex: 1 0 100%; + > li { + display: inline-flex; + flex-wrap: wrap; + } + } } } li { @@ -134,6 +143,7 @@ kbd { text-overflow: ellipsis; color: $color-main-text; opacity: .57; + flex: 1 1 0; &:first-child img { margin-bottom: -3px; margin-right: 11px; @@ -149,22 +159,6 @@ kbd { } } } - > { - /* Second level nesting for lists */ - ul ul { - display: none; - li > a { - padding-left: 32px; - } - } - .with-icon ul li { - > a, - &.app-navigation-entry-loading > a { - padding-left: 68px; - background-position: 44px center; - } - } - } &.hidden { display: none; } @@ -289,7 +283,7 @@ kbd { * App navigation utils, buttons and counters for drop down menu */ .app-navigation-entry-utils { - flex-shrink: 0; + flex: 0 1 auto; ul { display: flex !important; align-items: center; @@ -322,10 +316,8 @@ kbd { } .app-navigation-entry-utils-counter { overflow: hidden; - text-overflow: hidden; text-align: right; font-size: 9pt; - width: 38px; line-height: 44px; padding: 0 12px; /* Same padding as all li > a in the app-navigation */ } From a93bbae2b69de066f51a454e1865ff71f71bfb9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 7 Sep 2017 14:51:26 +0200 Subject: [PATCH 06/61] Second menu padding and ellipsis 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 | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 4bf547f347..e4783976d5 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -116,6 +116,7 @@ kbd { > ul { display: none; flex: 1 0 100%; + padding-left: 44px; > li { display: inline-flex; flex-wrap: wrap; @@ -131,7 +132,7 @@ kbd { background-size: 16px 16px; background-position: 14px center; background-repeat: no-repeat; - display: inline-flex; + display: block; justify-content: space-between; width: 100%; line-height: 44px; From fb968a3ea229ec0e71f34d53a9762e5bf8140ab3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 7 Sep 2017 17:01:04 +0200 Subject: [PATCH 07/61] Fix counter inside link and highlight submenu as well 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 | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index e4783976d5..94bc86e11c 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -114,12 +114,22 @@ kbd { } /* Second level nesting for lists */ > ul { - display: none; + //display: none; flex: 1 0 100%; padding-left: 44px; + width: inherit; > li { display: inline-flex; flex-wrap: wrap; + &:focus, + &:hover, + &.active, + a.selected { + &, + > a { + opacity: 1; + } + } } } } @@ -134,7 +144,6 @@ kbd { background-repeat: no-repeat; display: block; justify-content: space-between; - width: 100%; line-height: 44px; min-height: 44px; padding: 0 12px; @@ -155,8 +164,12 @@ kbd { padding-left: 44px; } /* Counter can also be inside the link */ - .app-navigation-entry-utils-counter { - padding-right: 0 !important; + > .app-navigation-entry-utils { + display: inline-block; + float: right; + .app-navigation-entry-utils-counter { + padding-right: 0 !important; + } } } } From 37d331014b4f76f81f61bfeea404165338f2d732 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 7 Sep 2017 18:32:47 +0200 Subject: [PATCH 08/61] Fix app navigation positionning 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 | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index 94bc86e11c..416c9ef657 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -172,6 +172,10 @@ kbd { } } } + > .app-navigation-entry-menu { + /* fix the flex positionning of the li parent */ + top: 44px; + } } &.hidden { display: none; From f5ae444330f6e4aa8930f041ae5478ecd397a54d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 8 Sep 2017 16:23:28 +0200 Subject: [PATCH 09/61] Fixed collapsible and Folders 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 | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 416c9ef657..41e842c686 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -112,9 +112,12 @@ kbd { box-shadow: inset 2px 0 $color-primary; } } + &.open > ul { + display: block; + } /* Second level nesting for lists */ > ul { - //display: none; + display: none; flex: 1 0 100%; padding-left: 44px; width: inherit; @@ -133,6 +136,15 @@ kbd { } } } + .collapsible.open { + &:hover, + &:focus { + //box-shadow: inset 0 0 3px $color-box-shadow; + } + ul { + display: block; + } + } } li { position: relative; @@ -188,6 +200,7 @@ kbd { display: none; } .collapsible { + border-width: 0 1 0 0 !important; > .collapse { position: absolute; height: 44px; @@ -203,6 +216,7 @@ kbd { border-radius: 0; outline: none !important; box-shadow: none; + transition: transform 250ms ease-in-out; } &:hover > a, &:focus > a { @@ -225,18 +239,6 @@ kbd { -ms-transform: rotate(0); transform: rotate(0); } - background-image: linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%); - background-image: -webkit-linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%); - background-image: -ms-linear-gradient(top, nc-darken($color-main-background, 8%) 0%, nc-darken($color-main-background, 3%) 100%); - } - } - > ul .collapsible.open { - &:hover, - &:focus { - box-shadow: inset 0 0 3px $color-box-shadow; - } - ul { - display: block; } } /* Deleted entries with undo button */ From 4e245ae709e15848234b98dd2b46ba9caf7c2737 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 8 Sep 2017 16:24:22 +0200 Subject: [PATCH 10/61] Animate hide/show collapsible menus 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 | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 41e842c686..91fb31701e 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -113,14 +113,16 @@ kbd { } } &.open > ul { - display: block; + max-height: 20000px; } /* Second level nesting for lists */ > ul { - display: none; flex: 1 0 100%; padding-left: 44px; width: inherit; + max-height: 0; + overflow: hidden; + transition: all 500ms ease-in-out; > li { display: inline-flex; flex-wrap: wrap; From 6978420010cbb902ae3b3b248611f882996909a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 8 Sep 2017 18:54:45 +0200 Subject: [PATCH 11/61] Organize app-navigation menu types 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 | 144 +++++++++++++++++++++++++-------------------- 1 file changed, 81 insertions(+), 63 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 91fb31701e..f2e07515b0 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -197,6 +197,10 @@ kbd { &.without-app-settings { padding-bottom: 0; } + + /** + * Collapsible menus + */ .collapse { /* hide collapse button initially */ display: none; @@ -243,63 +247,6 @@ kbd { } } } - /* Deleted entries with undo button */ - .app-navigation-entry-deleted { - display: inline-block; - height: 44px; - width: 100%; - } - .app-navigation-entry-deleted-description { - padding-left: 12px; - position: relative; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - display: inline-block; - width: calc(100% - 49px); - line-height: 44px; - float: left; - } - .app-navigation-entry-deleted-button { - margin: 0; - height: 44px; - width: 44px; - line-height: 44px; - border: 0; - display: inline-block; - background-color: transparent; - opacity: .5; - &:hover, &:focus { - opacity: 1; - } - } - /* counter and actions, legacy code TO BE DELETED */ - .utils { - position: absolute; - padding: 7px 7px 0 0; - right: 0; - top: 0; - bottom: 0; - font-size: 12px; - button, - .counter { - width: 44px; - height: 44px; - padding-top: 12px; - } - } - /* drag and drop */ - .drag-and-drop { - -webkit-transition: padding-bottom 500ms ease 0s; - transition: padding-bottom 500ms ease 0s; - padding-bottom: 40px; - } - .error { - color: $color-error; - } - .app-navigation-separator { - border-bottom: 1px solid nc-lighten($color-main-text, 86%); - } /** * App navigation utils, buttons and counters for drop down menu @@ -328,6 +275,9 @@ kbd { background-color: transparent; background-repeat: no-repeat; background-position: center; + } + /* Only apply background-image if no icon is set on the button */ + button:not([class^='icon-']):not([class*=' icon-']) { background-image: url('../img/actions/more.svg?v=1'); } &:hover button, @@ -344,13 +294,10 @@ kbd { padding: 0 12px; /* Same padding as all li > a in the app-navigation */ } } - - .app-navigation-entry-utils ul, - .app-navigation-entry-menu ul { - list-style-type: none; - } - /* editing an entry */ + /** + * Editable entries + */ .app-navigation-entry-edit { padding-left: 5px; padding-right: 5px; @@ -380,6 +327,77 @@ kbd { margin-right: 0; } } + + /** + * Deleted entries with undo button + */ + .app-navigation-entry-deleted { + display: inline-block; + height: 44px; + width: 100%; + .app-navigation-entry-deleted-description { + padding-left: 12px; + position: relative; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: inline-block; + width: calc(100% - 49px); + line-height: 44px; + float: left; + } + .app-navigation-entry-deleted-button { + margin: 0; + height: 44px; + width: 44px; + line-height: 44px; + border: 0; + display: inline-block; + background-color: transparent; + opacity: .5; + &:hover, &:focus { + opacity: 1; + } + } + } + + /** + * drag and drop + */ + .drag-and-drop { + -webkit-transition: padding-bottom 500ms ease 0s; + transition: padding-bottom 500ms ease 0s; + padding-bottom: 40px; + } + + /** + * Counter and actions, legacy code **TO BE DELETED** + */ + .utils { + position: absolute; + padding: 7px 7px 0 0; + right: 0; + top: 0; + bottom: 0; + font-size: 12px; + button, + .counter { + width: 44px; + height: 44px; + padding-top: 12px; + } + } + .error { + color: $color-error; + } + .app-navigation-separator { + border-bottom: 1px solid nc-lighten($color-main-text, 86%); + } + + .app-navigation-entry-utils ul, + .app-navigation-entry-menu ul { + list-style-type: none; + } } /* APP-CONTENT ---------------------------------------------------------------*/ From adffaff08185685bad265ba546ee5da517007cdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 8 Sep 2017 21:33:53 +0200 Subject: [PATCH 12/61] Fix typo 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 | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index f2e07515b0..1027ae44e9 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -113,7 +113,7 @@ kbd { } } &.open > ul { - max-height: 20000px; + max-height: 2000px; } /* Second level nesting for lists */ > ul { @@ -198,6 +198,23 @@ kbd { padding-bottom: 0; } + /** + * Button styling for menu, edit and undo + */ + .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button, + .app-navigation-entry-deleted .app-navigation-entry-deleted-button { + border: 0; + opacity: 0.5; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + &:hover, + &:focus { + background-color: transparent; + opacity: 1; + } + } + /** * Collapsible menus */ @@ -270,14 +287,6 @@ kbd { } .app-navigation-entry-utils-menu-button { button { - border: 0; - opacity: .5; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - } - /* Only apply background-image if no icon is set on the button */ - button:not([class^='icon-']):not([class*=' icon-']) { background-image: url('../img/actions/more.svg?v=1'); } &:hover button, From 04929640ac50823248ffac97bd5663df5754c8dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 9 Sep 2017 05:42:02 +0200 Subject: [PATCH 13/61] Removed animation breaking things and open submenu which arent .collapsible by default 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 | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 1027ae44e9..9680ddb198 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -113,16 +113,13 @@ kbd { } } &.open > ul { - max-height: 2000px; + display: block; } /* Second level nesting for lists */ > ul { flex: 1 0 100%; padding-left: 44px; width: inherit; - max-height: 0; - overflow: hidden; - transition: all 500ms ease-in-out; > li { display: inline-flex; flex-wrap: wrap; @@ -224,6 +221,9 @@ kbd { } .collapsible { border-width: 0 1 0 0 !important; + > ul { + display: none; + } > .collapse { position: absolute; height: 44px; From da232d4ce70724adef6ab582e1c0f1ff51b09ea7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 10 Sep 2017 05:56:27 +0200 Subject: [PATCH 14/61] Fix editable entry design and flex 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 | 45 ++++++++++++++++++++++++++++----------------- 1 file changed, 28 insertions(+), 17 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 9680ddb198..3272d7f716 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -187,6 +187,16 @@ kbd { /* fix the flex positionning of the li parent */ top: 44px; } + /* Show edit field if editing */ + &.editing { + > a, + > .app-navigation-entry-utils { + display: none; + } + .app-navigation-entry-edit { + display: block; + } + } } &.hidden { display: none; @@ -205,11 +215,11 @@ kbd { background-color: transparent; background-repeat: no-repeat; background-position: center; - &:hover, - &:focus { - background-color: transparent; - opacity: 1; - } + &:hover, + &:focus { + background-color: transparent; + opacity: 1; + } } /** @@ -286,7 +296,8 @@ kbd { box-shadow: none; } .app-navigation-entry-utils-menu-button { - button { + /* Prevent bg img override if an icon class is set */ + button:not([class^='icon-']):not([class*=' icon-']) { background-image: url('../img/actions/more.svg?v=1'); } &:hover button, @@ -310,19 +321,25 @@ kbd { .app-navigation-entry-edit { padding-left: 5px; padding-right: 5px; - display: inline-block; - height: 39px; + display: none; width: 100%; + form { + display: inline-flex; + width: 100%; + } input { border-bottom-right-radius: 0; border-top-right-radius: 0; - width: calc(100% - 36px); padding: 5px; margin-right: 0; height: 38px; float: left; border: 1px solid rgba(nc-lighten($color-main-text, 73%), 0.9); } + input[type='text'] { + width: 100%; + flex: 1 1 0; + } button, input[type='submit'] { width: 36px; @@ -341,7 +358,7 @@ kbd { * Deleted entries with undo button */ .app-navigation-entry-deleted { - display: inline-block; + display: inline-flex; height: 44px; width: 100%; .app-navigation-entry-deleted-description { @@ -350,20 +367,14 @@ kbd { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - display: inline-block; - width: calc(100% - 49px); + flex: 1 1 0; line-height: 44px; - float: left; } .app-navigation-entry-deleted-button { margin: 0; height: 44px; width: 44px; line-height: 44px; - border: 0; - display: inline-block; - background-color: transparent; - opacity: .5; &:hover, &:focus { opacity: 1; } From 76f055d7d33831040630f79a2ba4611e72ad3857 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 10 Sep 2017 15:26:20 +0200 Subject: [PATCH 15/61] Delete and edit animation 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 | 38 ++++++++++++++++++++++++++++---------- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 3272d7f716..177780c838 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -187,14 +187,26 @@ kbd { /* fix the flex positionning of the li parent */ top: 44px; } - /* Show edit field if editing */ - &.editing { + + /* Show edit/undo field if editing/deleted */ + &.editing, + &.deleted { > a, > .app-navigation-entry-utils { - display: none; + //display: none; + //transform: translateX(100%); } + } + &.editing { .app-navigation-entry-edit { - display: block; + //display: block; + transform: translateX(0); + } + } + &.deleted { + .app-navigation-entry-deleted { + //display: inline-flex; + transform: translateX(0); } } } @@ -321,8 +333,12 @@ kbd { .app-navigation-entry-edit { padding-left: 5px; padding-right: 5px; - display: none; - width: 100%; + display: block; + width: calc(100% - 1px); /* Avoid border overlapping */ + transition: transform 250ms ease-in-out; + transform: translateX(250px); + position: absolute; + background-color: $color-main-background; form { display: inline-flex; width: 100%; @@ -333,8 +349,7 @@ kbd { padding: 5px; margin-right: 0; height: 38px; - float: left; - border: 1px solid rgba(nc-lighten($color-main-text, 73%), 0.9); + border: 1px solid nc-darken($color-main-background, 8%); } input[type='text'] { width: 100%; @@ -344,7 +359,6 @@ kbd { input[type='submit'] { width: 36px; height: 38px; - float: left; } .icon-checkmark { border-bottom-left-radius: 0; @@ -360,7 +374,11 @@ kbd { .app-navigation-entry-deleted { display: inline-flex; height: 44px; - width: 100%; + width: calc(100% - 1px); /* Avoid border overlapping */ + transition: transform 250ms ease-in-out; + transform: translateX(250px); + position: absolute; + background-color: $color-main-background; .app-navigation-entry-deleted-description { padding-left: 12px; position: relative; From d0013b1480ba0c66791859e235e8a6c31aafb19e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 10 Sep 2017 15:38:36 +0200 Subject: [PATCH 16/61] merge animation into same prop 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 | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 177780c838..3df2e874e8 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -97,7 +97,8 @@ kbd { position: relative; height: 100%; width: inherit; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; box-sizing: border-box; > li { display: inline-flex; @@ -373,12 +374,6 @@ kbd { */ .app-navigation-entry-deleted { display: inline-flex; - height: 44px; - width: calc(100% - 1px); /* Avoid border overlapping */ - transition: transform 250ms ease-in-out; - transform: translateX(250px); - position: absolute; - background-color: $color-main-background; .app-navigation-entry-deleted-description { padding-left: 12px; position: relative; @@ -399,6 +394,20 @@ kbd { } } + + + /** + * Common rules for animation of undo and edit entries + */ + .app-navigation-entry-edit, + .app-navigation-entry-deleted { + width: calc(100% - 1px); /* Avoid border overlapping */ + transition: transform 250ms ease-in-out; + transform: translateX(250px); + position: absolute; + background-color: $color-main-background; + } + /** * drag and drop */ From 82986bab1bf6cb1f00ab53adcea5a4d05d0346a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 10 Sep 2017 15:38:52 +0200 Subject: [PATCH 17/61] Cleanup 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 | 2 -- 1 file changed, 2 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 3df2e874e8..9d4c103b9e 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -394,8 +394,6 @@ kbd { } } - - /** * Common rules for animation of undo and edit entries */ From 4a3efdc6df25508187a04e58a586ee75be9bf8f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 10 Sep 2017 15:55:45 +0200 Subject: [PATCH 18/61] Add inline style padding 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 | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 9d4c103b9e..82f20ef4ea 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -172,9 +172,13 @@ kbd { width: 16px; margin-left: 2px; } - &[class*='icon-'] { + + /* Add padding if an icon is set with a class or an inline style */ + &[class*='icon-'], + &[style*="background-image:"] { padding-left: 44px; } + /* Counter can also be inside the link */ > .app-navigation-entry-utils { display: inline-block; @@ -357,7 +361,7 @@ kbd { flex: 1 1 0; } button, - input[type='submit'] { + input { width: 36px; height: 38px; } From b0f7ad1508a1ae4ad54bc50782249343251682fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 10 Sep 2017 16:21:49 +0200 Subject: [PATCH 19/61] Finally force the menu to be a first-child of app-navigation 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 | 136 ++++++++++++++++++++++----------------------- 1 file changed, 67 insertions(+), 69 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 82f20ef4ea..04c704d38d 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -103,6 +103,9 @@ kbd { > li { display: inline-flex; flex-wrap: wrap; + position: relative; + width: 100%; + box-sizing: border-box; &:focus, &:hover, &.active, @@ -135,6 +138,70 @@ kbd { } } } + > a { + background-size: 16px 16px; + background-position: 14px center; + background-repeat: no-repeat; + display: block; + justify-content: space-between; + line-height: 44px; + min-height: 44px; + padding: 0 12px; + overflow: hidden; + box-sizing: border-box; + white-space: nowrap; + text-overflow: ellipsis; + color: $color-main-text; + opacity: .57; + flex: 1 1 0; + &:first-child img { + margin-bottom: -3px; + margin-right: 11px; + width: 16px; + margin-left: 2px; + } + + /* Add padding if an icon is set with a class or an inline style */ + &[class*='icon-'], + &[style*="background-image:"] { + padding-left: 44px; + } + + /* Counter can also be inside the link */ + > .app-navigation-entry-utils { + display: inline-block; + float: right; + .app-navigation-entry-utils-counter { + padding-right: 0 !important; + } + } + } + > .app-navigation-entry-menu { + /* fix the flex positionning of the li parent */ + top: 44px; + } + + /* Show edit/undo field if editing/deleted */ + &.editing, + &.deleted { + > a, + > .app-navigation-entry-utils { + //display: none; + //transform: translateX(100%); + } + } + &.editing { + .app-navigation-entry-edit { + //display: block; + transform: translateX(0); + } + } + &.deleted { + .app-navigation-entry-deleted { + //display: inline-flex; + transform: translateX(0); + } + } } .collapsible.open { &:hover, @@ -146,75 +213,6 @@ kbd { } } } - li { - position: relative; - width: 100%; - box-sizing: border-box; - > a { - background-size: 16px 16px; - background-position: 14px center; - background-repeat: no-repeat; - display: block; - justify-content: space-between; - line-height: 44px; - min-height: 44px; - padding: 0 12px; - overflow: hidden; - box-sizing: border-box; - white-space: nowrap; - text-overflow: ellipsis; - color: $color-main-text; - opacity: .57; - flex: 1 1 0; - &:first-child img { - margin-bottom: -3px; - margin-right: 11px; - width: 16px; - margin-left: 2px; - } - - /* Add padding if an icon is set with a class or an inline style */ - &[class*='icon-'], - &[style*="background-image:"] { - padding-left: 44px; - } - - /* Counter can also be inside the link */ - > .app-navigation-entry-utils { - display: inline-block; - float: right; - .app-navigation-entry-utils-counter { - padding-right: 0 !important; - } - } - } - > .app-navigation-entry-menu { - /* fix the flex positionning of the li parent */ - top: 44px; - } - - /* Show edit/undo field if editing/deleted */ - &.editing, - &.deleted { - > a, - > .app-navigation-entry-utils { - //display: none; - //transform: translateX(100%); - } - } - &.editing { - .app-navigation-entry-edit { - //display: block; - transform: translateX(0); - } - } - &.deleted { - .app-navigation-entry-deleted { - //display: inline-flex; - transform: translateX(0); - } - } - } &.hidden { display: none; } From ef41a55dc8c06a73d2bebf8429d9d52a041e8fad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 10 Sep 2017 16:25:00 +0200 Subject: [PATCH 20/61] Cleanup 2 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 | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 04c704d38d..d90ed9f3d1 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -182,32 +182,18 @@ kbd { } /* Show edit/undo field if editing/deleted */ - &.editing, - &.deleted { - > a, - > .app-navigation-entry-utils { - //display: none; - //transform: translateX(100%); - } - } &.editing { .app-navigation-entry-edit { - //display: block; transform: translateX(0); } } &.deleted { .app-navigation-entry-deleted { - //display: inline-flex; transform: translateX(0); } } } .collapsible.open { - &:hover, - &:focus { - //box-shadow: inset 0 0 3px $color-box-shadow; - } ul { display: block; } From c6ac46fe92c202d069ee30c78c3e852a4f435158 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 10 Sep 2017 16:50:35 +0200 Subject: [PATCH 21/61] Fix menu submenu after eec58ae32b0adf35af3aa550c1b1fe21bc2e963a 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 | 37 +++++++++++++++++++++++-------------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index d90ed9f3d1..e67db017d9 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -103,9 +103,6 @@ kbd { > li { display: inline-flex; flex-wrap: wrap; - position: relative; - width: 100%; - box-sizing: border-box; &:focus, &:hover, &.active, @@ -138,6 +135,11 @@ kbd { } } } + } + li { + position: relative; + width: 100%; + box-sizing: border-box; > a { background-size: 16px 16px; background-position: 14px center; @@ -154,6 +156,7 @@ kbd { color: $color-main-text; opacity: .57; flex: 1 1 0; + /* TODO: forbid using img as icon in menu? */ &:first-child img { margin-bottom: -3px; margin-right: 11px; @@ -163,7 +166,7 @@ kbd { /* Add padding if an icon is set with a class or an inline style */ &[class*='icon-'], - &[style*="background-image:"] { + &[style*='background-image:'] { padding-left: 44px; } @@ -176,8 +179,9 @@ kbd { } } } + + /* Popover fix the flex positionning of the li parent */ > .app-navigation-entry-menu { - /* fix the flex positionning of the li parent */ top: 44px; } @@ -193,6 +197,7 @@ kbd { } } } + .collapsible.open { ul { display: block; @@ -333,8 +338,6 @@ kbd { width: 100%; } input { - border-bottom-right-radius: 0; - border-top-right-radius: 0; padding: 5px; margin-right: 0; height: 38px; @@ -343,17 +346,23 @@ kbd { input[type='text'] { width: 100%; flex: 1 1 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; } button, - input { + input:not([type='text']) { width: 36px; height: 38px; - } - .icon-checkmark { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - border-left: 0; - margin-right: 0; + &:not(:last-child) { + border-radius: 0; + border-left: 0; + } + &:last-child { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-left: 0; + margin-right: 0; + } } } From c9719ca60173586bfab0cb984744e371fa4375b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 10 Sep 2017 17:07:19 +0200 Subject: [PATCH 22/61] Syntax fix and collapse button padding if no icon on link 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 | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index e67db017d9..8dc1ba2fa3 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -136,7 +136,9 @@ kbd { } } } - li { + /* Menu and submenu */ + > li, + > li > ul > li { position: relative; width: 100%; box-sizing: border-box; @@ -164,13 +166,13 @@ kbd { margin-left: 2px; } - /* Add padding if an icon is set with a class or an inline style */ + /* add padding if an icon is set with a class or an inline style */ &[class*='icon-'], &[style*='background-image:'] { padding-left: 44px; } - /* Counter can also be inside the link */ + /* counter can also be inside the link */ > .app-navigation-entry-utils { display: inline-block; float: right; @@ -180,12 +182,12 @@ kbd { } } - /* Popover fix the flex positionning of the li parent */ + /* popover fix the flex positionning of the li parent */ > .app-navigation-entry-menu { top: 44px; } - /* Show edit/undo field if editing/deleted */ + /* show edit/undo field if editing/deleted */ &.editing { .app-navigation-entry-edit { transform: translateX(0); @@ -256,6 +258,10 @@ kbd { outline: none !important; box-shadow: none; transition: transform 250ms ease-in-out; + /* force padding on link if collapse is here no matter if a has an icon class */ + & + a { + padding-left: 44px; + } } &:hover > a, &:focus > a { From 43f3fad41bcfaf13dc0c5b92926fe7ef942b87a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 12 Sep 2017 05:44:46 +0200 Subject: [PATCH 23/61] Icon fix for sub-items 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 | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index 8dc1ba2fa3..db0d6d5dda 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -133,6 +133,13 @@ kbd { opacity: 1; } } + /* Submenu fix for icon */ + > a { + &[class*='icon-'], + &[style*='background-image:'] { + margin-left: -32px; /* 44px padding - 12px padding */ + } + } } } } From a8df5c2bed2d5b51adc58debb053d41222da986e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 12 Sep 2017 16:22:06 +0200 Subject: [PATCH 24/61] Removed collapsible button requirements, and animate submenu deletion 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 | 45 +++++++++++++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 16 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index db0d6d5dda..63510d1b36 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -116,11 +116,23 @@ kbd { &.open > ul { display: block; } + /* hide and animate the deletion of subitems */ + &.deleted { + > ul { + opacity: 0; + max-height: 0; + overflow-y: hidden; + } + } /* Second level nesting for lists */ > ul { flex: 1 0 100%; padding-left: 44px; width: inherit; + /* bezier override the hide/slow effect due to the 2000 max-height */ + transition: max-height 250ms cubic-bezier(0, 1, 0, 1), + opacity 250ms ease-in-out; + max-height: 2000px; > li { display: inline-flex; flex-wrap: wrap; @@ -240,16 +252,11 @@ kbd { /** * Collapsible menus */ - .collapse { - /* hide collapse button initially */ - display: none; - } .collapsible { - border-width: 0 1 0 0 !important; > ul { display: none; } - > .collapse { + &:after { position: absolute; height: 44px; width: 44px; @@ -264,29 +271,35 @@ kbd { border-radius: 0; outline: none !important; box-shadow: none; - transition: transform 250ms ease-in-out; + content: ' '; + opacity: 0; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + /* force padding on link if collapse is here no matter if a has an icon class */ & + a { padding-left: 44px; } } + &:after, + > a { + transition: background 100ms ease-in-out, + transform 250ms ease-in-out, + opacity 100ms ease-in-out; + } &:hover > a, &:focus > a { - background-image: none; + background-position-x: -50px; } &:hover, &:focus { - > .collapse { - display: block; + &:after { + opacity: 1; } } - .collapse { - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - } &.open { - .collapse { + &:after { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); From 6ff81cdd4b36ff57a82c8256da4494fea9f4770c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 12 Sep 2017 16:43:28 +0200 Subject: [PATCH 25/61] Animation 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 | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 63510d1b36..0a7de8e29c 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -113,11 +113,9 @@ kbd { box-shadow: inset 2px 0 $color-primary; } } - &.open > ul { - display: block; - } - /* hide and animate the deletion of subitems */ - &.deleted { + /* hide and animate deletion/collapse of subitems */ + &.deleted, + &.collapsible:not(.open) { > ul { opacity: 0; max-height: 0; @@ -133,6 +131,7 @@ kbd { transition: max-height 250ms cubic-bezier(0, 1, 0, 1), opacity 250ms ease-in-out; max-height: 2000px; + opacity: 1; > li { display: inline-flex; flex-wrap: wrap; @@ -218,12 +217,6 @@ kbd { } } } - - .collapsible.open { - ul { - display: block; - } - } } &.hidden { display: none; @@ -253,9 +246,6 @@ kbd { * Collapsible menus */ .collapsible { - > ul { - display: none; - } &:after { position: absolute; height: 44px; @@ -276,11 +266,11 @@ kbd { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); + } - /* force padding on link if collapse is here no matter if a has an icon class */ - & + a { - padding-left: 44px; - } + /* force padding on link if collapse is here no matter if a has an icon class */ + > a:first-child { + padding-left: 44px; } &:after, > a { From 54bdec81288e9e20add212a0e1eba139fa271525 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 12 Sep 2017 16:46:39 +0200 Subject: [PATCH 26/61] Fixed comment 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 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 0a7de8e29c..cf546641b8 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -268,7 +268,7 @@ kbd { transform: rotate(-90deg); } - /* force padding on link if collapse is here no matter if a has an icon class */ + /* force padding on link no matter if 'a' has an icon class */ > a:first-child { padding-left: 44px; } From 9510d8838f0067e237b016177d49886f1e9a2edc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 12 Sep 2017 17:59:01 +0200 Subject: [PATCH 27/61] Retro compatibility collapse button hide 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 | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index cf546641b8..16f73a1ac0 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -246,6 +246,11 @@ kbd { * Collapsible menus */ .collapsible { + /* Fallback for old collapse button. + TODO: to be removed. Leaved here for retro compatibility */ + .collapse { + display: none; + } &:after { position: absolute; height: 44px; From 681a4ba8d2eccbf72da8d6d6d706ec40d662830a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 13 Sep 2017 14:19:08 +0200 Subject: [PATCH 28/61] Improve collapse animation 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 | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 16f73a1ac0..5f2cb222b0 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -120,6 +120,9 @@ kbd { opacity: 0; max-height: 0; overflow-y: hidden; + /* bezier override the hide/slow effect due to the 2000 max-height */ + transition: max-height 500ms cubic-bezier(0, 1, 0, 1), + opacity 250ms ease-in-out; } } /* Second level nesting for lists */ @@ -127,8 +130,7 @@ kbd { flex: 1 0 100%; padding-left: 44px; width: inherit; - /* bezier override the hide/slow effect due to the 2000 max-height */ - transition: max-height 250ms cubic-bezier(0, 1, 0, 1), + transition: max-height 1000ms ease-in-out, opacity 250ms ease-in-out; max-height: 2000px; opacity: 1; From e2c65cfee583b85bed9dfc50d6f9a723f814a399 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 13 Sep 2017 14:26:26 +0200 Subject: [PATCH 29/61] no need for overflow, let the opacity trick the user and the animation smoothly push other items 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 | 1 - 1 file changed, 1 deletion(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 5f2cb222b0..15736f0880 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -119,7 +119,6 @@ kbd { > ul { opacity: 0; max-height: 0; - overflow-y: hidden; /* bezier override the hide/slow effect due to the 2000 max-height */ transition: max-height 500ms cubic-bezier(0, 1, 0, 1), opacity 250ms ease-in-out; From ce36b13aafd5c346fe9f701ba6819a948e3e8630 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 13 Sep 2017 16:10:20 +0200 Subject: [PATCH 30/61] Max height to 9999 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 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 15736f0880..0e7dccf7b8 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -120,7 +120,7 @@ kbd { opacity: 0; max-height: 0; /* bezier override the hide/slow effect due to the 2000 max-height */ - transition: max-height 500ms cubic-bezier(0, 1, 0, 1), + transition: max-height 1000ms cubic-bezier(0, 1, 0, 1), opacity 250ms ease-in-out; } } @@ -129,9 +129,9 @@ kbd { flex: 1 0 100%; padding-left: 44px; width: inherit; - transition: max-height 1000ms ease-in-out, + transition: max-height 2000ms ease-in-out, opacity 250ms ease-in-out; - max-height: 2000px; + max-height: 9999px; opacity: 1; > li { display: inline-flex; From bd520cbfa7b6749131a88441f7db05ac905383df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 10:03:27 +0200 Subject: [PATCH 31/61] Added bullet class and fixed comments 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 | 52 ++++++++++++++++++++++++++++------------------ 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 0e7dccf7b8..dc66f155c7 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -146,11 +146,15 @@ kbd { } } /* Submenu fix for icon */ - > a { - &[class*='icon-'], - &[style*='background-image:'] { - margin-left: -32px; /* 44px padding - 12px padding */ - } + > .app-navigation-entry-bullet + a, + > a[class*='icon-'], + > a[style*='background-image:'], + .app-navigation-entry-bullet { + margin-left: -32px; /* 44px padding - 12px padding */ + } + /* Submenu fix for bullet */ + > .app-navigation-entry-bullet { + left: -32px;/* 44px padding - 12px padding */ } } } @@ -161,6 +165,7 @@ kbd { position: relative; width: 100%; box-sizing: border-box; + /* Main entry link */ > a { background-size: 16px 16px; background-position: 14px center; @@ -177,6 +182,7 @@ kbd { color: $color-main-text; opacity: .57; flex: 1 1 0; + z-index: 100; /* above the bullet */ /* TODO: forbid using img as icon in menu? */ &:first-child img { margin-bottom: -3px; @@ -185,12 +191,6 @@ kbd { margin-left: 2px; } - /* add padding if an icon is set with a class or an inline style */ - &[class*='icon-'], - &[style*='background-image:'] { - padding-left: 44px; - } - /* counter can also be inside the link */ > .app-navigation-entry-utils { display: inline-block; @@ -200,6 +200,24 @@ kbd { } } } + /* Bullet icon */ + > .app-navigation-entry-bullet { + position: absolute; + display: block; + margin: 16px; + width: 12px; + height: 12px; + border: none; + border-radius: 50%; + cursor: pointer; + } + + /* padding in case of icon or bullet */ + > .app-navigation-entry-bullet + a, + > a[class*='icon-'], + > a[style*='background-image:'] { + padding-left: 44px; + } /* popover fix the flex positionning of the li parent */ > .app-navigation-entry-menu { @@ -207,15 +225,9 @@ kbd { } /* show edit/undo field if editing/deleted */ - &.editing { - .app-navigation-entry-edit { - transform: translateX(0); - } - } - &.deleted { - .app-navigation-entry-deleted { - transform: translateX(0); - } + &.editing .app-navigation-entry-edit, + &.deleted .app-navigation-entry-deleted { + transform: translateX(0); } } } From 97b614829098318f0432f166afa35773bfa70db0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 10:08:34 +0200 Subject: [PATCH 32/61] Fix deletion/edit supperposition 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 | 1 + 1 file changed, 1 insertion(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index dc66f155c7..23d4dc31f5 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -435,6 +435,7 @@ kbd { transform: translateX(250px); position: absolute; background-color: $color-main-background; + z-index: 250; } /** From 63bcd47090f5667c9f4af20e0fbfb5c1b1883d14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 10:49:52 +0200 Subject: [PATCH 33/61] Finally removed old legacy code 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 | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 23d4dc31f5..64011ff07f 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -446,24 +446,7 @@ kbd { transition: padding-bottom 500ms ease 0s; padding-bottom: 40px; } - - /** - * Counter and actions, legacy code **TO BE DELETED** - */ - .utils { - position: absolute; - padding: 7px 7px 0 0; - right: 0; - top: 0; - bottom: 0; - font-size: 12px; - button, - .counter { - width: 44px; - height: 44px; - padding-top: 12px; - } - } + .error { color: $color-error; } From 04a0c3cfaf6ccb4a8d45239d8197cb1b303323ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 11:02:16 +0200 Subject: [PATCH 34/61] Hide bullet & icons if menu has loading icon 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 | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index 64011ff07f..9d9606a4b7 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -165,6 +165,16 @@ kbd { position: relative; width: 100%; box-sizing: border-box; + /* Align items */ + &.icon-loading-small { + &:after { + left: 22px; + } + > a, + > .app-navigation-entry-bullet { + background: none !important; + } + } /* Main entry link */ > a { background-size: 16px 16px; From e9d596011d24e818f59e98cbddcdbd9b91532b57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 11:58:13 +0200 Subject: [PATCH 35/61] Loading position 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 | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 9d9606a4b7..3c2917f0ad 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -113,6 +113,12 @@ kbd { box-shadow: inset 2px 0 $color-primary; } } + + /* align loader */ + &.icon-loading-small:after { + left: 22px; + } + /* hide and animate deletion/collapse of subitems */ &.deleted, &.collapsible:not(.open) { @@ -124,6 +130,7 @@ kbd { opacity 250ms ease-in-out; } } + /* Second level nesting for lists */ > ul { flex: 1 0 100%; @@ -145,6 +152,12 @@ kbd { opacity: 1; } } + + /* align loader */ + &.icon-loading-small:after { + left: -10px; + } + /* Submenu fix for icon */ > .app-navigation-entry-bullet + a, > a[class*='icon-'], @@ -152,6 +165,7 @@ kbd { .app-navigation-entry-bullet { margin-left: -32px; /* 44px padding - 12px padding */ } + /* Submenu fix for bullet */ > .app-navigation-entry-bullet { left: -32px;/* 44px padding - 12px padding */ @@ -165,11 +179,8 @@ kbd { position: relative; width: 100%; box-sizing: border-box; - /* Align items */ + /* hide icons if loading */ &.icon-loading-small { - &:after { - left: 22px; - } > a, > .app-navigation-entry-bullet { background: none !important; From 728e00b1b0fb7c89dffe864d3fc1d4ba89d687a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 12:02:25 +0200 Subject: [PATCH 36/61] Fix github color highlighter 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 | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 3c2917f0ad..262d3888f8 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -161,7 +161,7 @@ kbd { /* Submenu fix for icon */ > .app-navigation-entry-bullet + a, > a[class*='icon-'], - > a[style*='background-image:'], + > a[style*='background-image'], .app-navigation-entry-bullet { margin-left: -32px; /* 44px padding - 12px padding */ } @@ -236,7 +236,7 @@ kbd { /* padding in case of icon or bullet */ > .app-navigation-entry-bullet + a, > a[class*='icon-'], - > a[style*='background-image:'] { + > a[style*='background-image'] { padding-left: 44px; } From 085d963166ec5c0c8b59faedf7a8d76908fcf6bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 16:07:36 +0200 Subject: [PATCH 37/61] Icon shifting and unification of padding 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 | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 262d3888f8..979d545933 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -103,6 +103,12 @@ kbd { > li { display: inline-flex; flex-wrap: wrap; + + > a { + /* Ugly hack for overriding the main entry link */ + padding-left: 44px !important; + } + &:focus, &:hover, &.active, @@ -134,7 +140,7 @@ kbd { /* Second level nesting for lists */ > ul { flex: 1 0 100%; - padding-left: 44px; + padding-left: 62px; width: inherit; transition: max-height 2000ms ease-in-out, opacity 250ms ease-in-out; From ee051b55a8267e77742a3f9e1b91b7ef60bce77b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 16:10:34 +0200 Subject: [PATCH 38/61] Removed unused props 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 | 2 -- 1 file changed, 2 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 979d545933..2a67c7748e 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -165,7 +165,6 @@ kbd { } /* Submenu fix for icon */ - > .app-navigation-entry-bullet + a, > a[class*='icon-'], > a[style*='background-image'], .app-navigation-entry-bullet { @@ -240,7 +239,6 @@ kbd { } /* padding in case of icon or bullet */ - > .app-navigation-entry-bullet + a, > a[class*='icon-'], > a[style*='background-image'] { padding-left: 44px; From f2f0685bb223a926bf1cb11be6bd7b48b0cb92f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 16:50:23 +0200 Subject: [PATCH 39/61] Loader fix on main entry 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 | 1 + 1 file changed, 1 insertion(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index 2a67c7748e..a3b8a1f156 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -123,6 +123,7 @@ kbd { /* align loader */ &.icon-loading-small:after { left: 22px; + top: 22px; } /* hide and animate deletion/collapse of subitems */ From 99598d3f405c6c87fcd6f9248acdf3431ee0ffdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 19:13:40 +0200 Subject: [PATCH 40/61] Padding for deleted and editing entries 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 | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index a3b8a1f156..15161ccfab 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -104,7 +104,9 @@ kbd { display: inline-flex; flex-wrap: wrap; - > a { + > a, + > .app-navigation-entry-deleted, + > .app-navigation-entry-edit { /* Ugly hack for overriding the main entry link */ padding-left: 44px !important; } @@ -431,8 +433,8 @@ kbd { */ .app-navigation-entry-deleted { display: inline-flex; + padding-left: 12px; .app-navigation-entry-deleted-description { - padding-left: 12px; position: relative; white-space: nowrap; text-overflow: ellipsis; From f43b832d84689e6d751f1e3dbe3cf38eb914dd1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 19:27:43 +0200 Subject: [PATCH 41/61] Align edit input with its corresponding link text and fix animation 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 | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 15161ccfab..eab5683a5f 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -105,11 +105,16 @@ kbd { flex-wrap: wrap; > a, - > .app-navigation-entry-deleted, - > .app-navigation-entry-edit { + > .app-navigation-entry-deleted { /* Ugly hack for overriding the main entry link */ padding-left: 44px !important; } + > .app-navigation-entry-edit { + /* Ugly hack for overriding the main entry link */ + /* align the input correctly with the link text + 44px-6px padding for the input */ + padding-left: 38px !important; + } &:focus, &:hover, @@ -253,7 +258,9 @@ kbd { } /* show edit/undo field if editing/deleted */ - &.editing .app-navigation-entry-edit, + &.editing .app-navigation-entry-edit { + opacity: 1; + } &.deleted .app-navigation-entry-deleted { transform: translateX(0); } @@ -391,8 +398,8 @@ kbd { padding-right: 5px; display: block; width: calc(100% - 1px); /* Avoid border overlapping */ - transition: transform 250ms ease-in-out; - transform: translateX(250px); + transition: opacity 250ms ease-in-out; + opacity: 0; position: absolute; background-color: $color-main-background; form { @@ -434,6 +441,7 @@ kbd { .app-navigation-entry-deleted { display: inline-flex; padding-left: 12px; + transform: translateX(250px); .app-navigation-entry-deleted-description { position: relative; white-space: nowrap; @@ -459,8 +467,8 @@ kbd { .app-navigation-entry-edit, .app-navigation-entry-deleted { width: calc(100% - 1px); /* Avoid border overlapping */ - transition: transform 250ms ease-in-out; - transform: translateX(250px); + transition: transform 250ms ease-in-out, + opacity 250ms ease-in-out; position: absolute; background-color: $color-main-background; z-index: 250; From f721cc56850548990b668f9f41fe7032439200db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 14 Sep 2017 21:03:18 +0200 Subject: [PATCH 42/61] Fix entry edit buttons borders 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 | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index eab5683a5f..c94430c5e5 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -411,6 +411,10 @@ kbd { margin-right: 0; height: 38px; border: 1px solid nc-darken($color-main-background, 8%); + &:hover { + /* overlapp borders */ + z-index: 1; + } } input[type='text'] { width: 100%; @@ -424,13 +428,13 @@ kbd { height: 38px; &:not(:last-child) { border-radius: 0; - border-left: 0; + } + &:not(:first-child) { + margin-left: -1px; } &:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; - border-left: 0; - margin-right: 0; } } } From 9b472024a14b84fdf79adb0a5a741be52dd7144e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sat, 16 Sep 2017 17:33:25 +0200 Subject: [PATCH 43/61] Flex to menu items 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 | 2 ++ 1 file changed, 2 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index c94430c5e5..7ac357e6a1 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -100,6 +100,8 @@ kbd { overflow-x: hidden; overflow-y: auto; box-sizing: border-box; + display: flex; + flex-direction: column; > li { display: inline-flex; flex-wrap: wrap; From edc9f176e5312a2279ab5d1588670baebba2507c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Sun, 17 Sep 2017 12:39:13 +0200 Subject: [PATCH 44/61] Allow custom classes on nav entries MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/templates/appnavigation.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php index bbd78079d3..0a40c7ba81 100644 --- a/apps/files/templates/appnavigation.php +++ b/apps/files/templates/appnavigation.php @@ -1,6 +1,6 @@