From 46da059b8fb47f4899e7b23c813daf376b29277e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 27 Sep 2017 13:40:48 +0200 Subject: [PATCH 01/10] Drop shadow fix on popover 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 b735dfa4d6..a1901b05a1 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -753,7 +753,7 @@ kbd { margin: 5px; margin-top: -5px; right: 0; - box-shadow: 0 1px 10px $color-box-shadow; + filter: drop-shadow(0 1px 10px $color-box-shadow); display: none; &:after { From d54253d4e4b7a61ad6f1ed1a68720fc4573f29c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 27 Sep 2017 14:16:25 +0200 Subject: [PATCH 02/10] Implement progress theming into core and better visual on quota display MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 41 ++++++++++++++++--- core/css/styles.scss | 33 ++++++++------- .../settings/personal/personal.info.php | 20 +++++++-- 3 files changed, 71 insertions(+), 23 deletions(-) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 5fe65935ec..de09db958a 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -35,7 +35,7 @@ select, button, .button, input:not([type='range']), textarea, -#quota, .pager li a { +.pager li a { margin: 3px 3px 3px 0; padding: 7px 6px; font-size: 13px; @@ -45,8 +45,7 @@ textarea, outline: none; border-radius: 3px; &:not(:disabled):not(.primary) { - /* no border on quota */ - &:not(#quota):hover, + &:hover, &:focus, &.active { /* active class used for multiselect */ @@ -185,9 +184,6 @@ button img, .button img { cursor: pointer; } -#quota { - color: nc-lighten($color-main-text, 33%); -} select, .button.multiselect { font-weight: 400; @@ -472,6 +468,39 @@ input { } } +/* Progressbar */ +progress { + display: block; + width: 100%; + padding: 0; + border: 0 none; + background-color: nc-darken($color-main-background, 10%); + border-radius: 3px; + flex-basis: 100%; + height: 5px; + &.warn { + &::-moz-progress-bar { + background: $color-error; + } + &::-webkit-progress-value { + background: $color-error; + } + } + &::-webkit-progress-bar { + background: transparent; + } + &::-moz-progress-bar { + border-radius: 3px; + background: $color-primary; + transition: 250ms all ease-in-out; + } + &::-webkit-progress-value { + border-radius: 3px; + background: $color-primary; + transition: 250ms all ease-in-out; + } +} + /* Animation */ @keyframes shake { 10%, diff --git a/core/css/styles.scss b/core/css/styles.scss index be0b200ce3..4a47d192ef 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -930,26 +930,31 @@ code { margin: 30px !important; position: relative; padding: 0 !important; + progress { + height: 36px; + } div { - padding: 0; - background-color: nc-darken($color-main-background, 10%); font-weight: normal; white-space: nowrap; - border-bottom-left-radius: 3px; - border-top-left-radius: 3px; - min-width: 1%; - max-width: 100%; + position: absolute;; + top: 0; + &.quota-warning { + background-color: $color-warning; + } + &.quotatext-bg { + mix-blend-mode: luminosity; + } + &.quotatext-fg { + color: $color-primary-text; + overflow: hidden; + z-index: 50; + } + .quotatext { + padding: .6em 1em; + } } } -#quotatext { - padding: .6em 1em; -} - -#quota div.quota-warning { - background-color: $color-warning; -} - .pager { list-style: none; float: right; diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php index 084b34af96..d6f6061ebf 100644 --- a/settings/templates/settings/personal/personal.info.php +++ b/settings/templates/settings/personal/personal.info.php @@ -38,9 +38,23 @@ vendor_style('jcrop/css/jquery.Jcrop'); ?>
-
80): ?> class="quota-warning" > -

+ 80): ?> class="quota-warning" > + +

+

+ + t('You are using %s of %s', + [$_['usage'], $_['total_space']]));?> + + t('You are using %s of %s (%s %%)', + [$_['usage'], $_['total_space'], $_['usage_relative']]));?> + +

+
+
+

t('You are using %s of %s', [$_['usage'], $_['total_space']]));?> From f09a70e9b56a7f83857dad684cc4574a08db3421 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 27 Sep 2017 16:35:33 +0200 Subject: [PATCH 03/10] Quota bar fix on user list MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/js/singleselect.js | 1 - settings/css/settings.scss | 36 ++++++++++------------ settings/js/users/users.js | 7 ++++- settings/templates/users/part.userlist.php | 2 +- 4 files changed, 24 insertions(+), 22 deletions(-) diff --git a/core/js/singleselect.js b/core/js/singleselect.js index cd0dd52651..94f7da8264 100644 --- a/core/js/singleselect.js +++ b/core/js/singleselect.js @@ -42,7 +42,6 @@ input.tipsy({gravity: gravity, trigger: 'manual'}); input.tipsy('show'); } - select.css('background-color', 'white'); input.focus(); } }); diff --git a/settings/css/settings.scss b/settings/css/settings.scss index 509d867baf..1ba3c76bfe 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -680,18 +680,30 @@ input#recoveryPassword { #userlist td.quota { position: relative; width: 10em; + progress.quota-user-progress { + position: absolute; + width: calc(10em + 0px); + margin-top: -7px; + z-index: 0; + margin-left: 1px; + height: 3px; + } } select { &.quota-user { - position: absolute; - left: 0; - top: 0; width: 10em; height: 34px; + z-index: 150; + position: relative; } - &.quota.active { - background: #fff; + + progress.quota-user-progress { + position: absolute; + width: calc(10em + 0px); + margin-top: -7px; + z-index: 0; + margin-left: 1px; + height: 3px; } } @@ -699,20 +711,6 @@ input.userFilter { width: 200px; } -.quota_progress_container { - position: absolute; - left: 0; - top: 0; - width: 10em; - margin: 3px 3px 3px 0; - border-radius: 3px; -} - -.quota_progress { - background-color: #eee; - height: 34px; -} - #newusergroups + input[type='submit'] { position: relative; top: -1px; diff --git a/settings/js/users/users.js b/settings/js/users/users.js index 6fb74e1ba6..8b97485e1b 100644 --- a/settings/js/users/users.js +++ b/settings/js/users/users.js @@ -571,7 +571,12 @@ var UserList = { //asymptotic curve approaching 50% at 10GB to visualize used stace with infinite quota usedQuota = 95 * (1 - (1 / (usedInGB + 1))); } - $tr.find('.quota_progress').width(usedQuota + '%'); + $tr.find('.quota-user-progress').val(usedQuota); + if (usedQuota > 80) { + $tr.find('.quota-user-progress').addClass('warn'); + } else { + $tr.find('.quota-user-progress').removeClass('warn'); + } }, /** diff --git a/settings/templates/users/part.userlist.php b/settings/templates/users/part.userlist.php index 5ceda71fc0..e626a0c537 100644 --- a/settings/templates/users/part.userlist.php +++ b/settings/templates/users/part.userlist.php @@ -43,7 +43,6 @@ -

+ From f038ecbfe3f4a8d07948c3cd0bf26bd291d71885 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 27 Sep 2017 16:44:56 +0200 Subject: [PATCH 04/10] Fixed quota on homepage (files) 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 | 7 +++---- core/css/styles.scss | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php index 09b0294368..6a7b4e4b11 100644 --- a/apps/files/templates/appnavigation.php +++ b/apps/files/templates/appnavigation.php @@ -11,7 +11,7 @@ -
  • @@ -23,9 +23,8 @@ p($l->t('%s used', [$_['usage']])); } ?>

    -
    80): ?>class="quota-warning"> -
    + 80): ?> class="quota-warning" >
    • diff --git a/core/css/styles.scss b/core/css/styles.scss index 4a47d192ef..3b062250df 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -925,7 +925,7 @@ code { font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace; } -#quota { +#body-settings #quota { cursor: default; margin: 30px !important; position: relative; From 08c718da6458681bb70047342d77a91badb7e74a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 27 Sep 2017 17:05:30 +0200 Subject: [PATCH 05/10] Fix drop shadow with filter 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 a1901b05a1..1812a13cb4 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -753,7 +753,7 @@ kbd { margin: 5px; margin-top: -5px; right: 0; - filter: drop-shadow(0 1px 10px $color-box-shadow); + filter: drop-shadow(0 1px 3px $color-box-shadow); display: none; &:after { From c1795b0611875b309ad099e285fdfd54dad91804 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 28 Sep 2017 11:12:52 +0200 Subject: [PATCH 06/10] Fix tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- settings/js/users/users.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/settings/js/users/users.js b/settings/js/users/users.js index 8b97485e1b..f0ba433e86 100644 --- a/settings/js/users/users.js +++ b/settings/js/users/users.js @@ -571,7 +571,7 @@ var UserList = { //asymptotic curve approaching 50% at 10GB to visualize used stace with infinite quota usedQuota = 95 * (1 - (1 / (usedInGB + 1))); } - $tr.find('.quota-user-progress').val(usedQuota); + $tr.find('.quota-user-progress').val( isNaN(usedQuota) ? 0 : usedQuota ); if (usedQuota > 80) { $tr.find('.quota-user-progress').addClass('warn'); } else { From 7fb329294958beab28a2cbd8370d5733de8ec4d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 28 Sep 2017 11:55:25 +0200 Subject: [PATCH 07/10] Popover to css guidelines MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- settings/css/settings.scss | 52 +++++++--------------- settings/js/users/users.js | 3 ++ settings/templates/users/part.userlist.php | 2 +- 3 files changed, 19 insertions(+), 38 deletions(-) diff --git a/settings/css/settings.scss b/settings/css/settings.scss index 1ba3c76bfe..9ef7052e95 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -576,42 +576,6 @@ span.usersLastLoginTooltip { .groupsListContainer.hidden { display: none; } - .bubble { - z-index: 1; - right: -6px; - top: auto; - &:after { - right: 5px; - } - } - .popovermenu { - a.menuitem { - height: 20px; - margin: 0; - padding: 0; - line-height: initial; - } - margin-top: 4px; - border-top-right-radius: 3px; - right: 3px; - opacity: 0; - display: block; - visibility: hidden; - transition: opacity 0.1s, visibility 0.1s; - } - tr.active .popovermenu { - opacity: 1; - visibility: visible; - } - .popovermenu > ul.userActionsMenu { - right: 15px; - a { - margin: 5px 0; - span:last-child { - margin-left: 5px; - } - } - } } /* because of accessibility the name cell is - therefore we enforce the black color */ @@ -646,10 +610,24 @@ tr:hover > td { td.userActions { width: 25px; text-align: center; + position: relative; .action { position: relative; top: 3px; } + .toggleUserActions { + border: none; + background-color: rgba(0, 0, 0, 0); + width: 34px; + height: 34px; + margin: 0; + opacity: 0.5; + &:hover, + &:focus { + background-color: transparent; + opacity: 1; + } + } } tr.active td.userActions .action { @@ -694,7 +672,7 @@ select { &.quota-user { width: 10em; height: 34px; - z-index: 150; + z-index: 50; position: relative; } + progress.quota-user-progress { diff --git a/settings/js/users/users.js b/settings/js/users/users.js index f0ba433e86..4a4faf13ec 100644 --- a/settings/js/users/users.js +++ b/settings/js/users/users.js @@ -955,9 +955,12 @@ $(document).ready(function () { if ($tr.is('.active')) { $tr.removeClass('active'); + menudiv.removeClass('open'); return; } $('#userlist tr.active').removeClass('active'); + $('#userlist .popovermenu').removeClass('open'); + menudiv.addClass('open'); menudiv.find('.action-togglestate').empty(); if ($tr.data('userEnabled')) { $('.action-togglestate', $td).html('' + t('settings', 'Disable') + ''); diff --git a/settings/templates/users/part.userlist.php b/settings/templates/users/part.userlist.php index e626a0c537..146e35d11a 100644 --- a/settings/templates/users/part.userlist.php +++ b/settings/templates/users/part.userlist.php @@ -65,7 +65,7 @@ -
    +
    • From 9ff07bd2800c3c6e4450fe3a49b86b78da7821a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 28 Sep 2017 16:10:30 +0200 Subject: [PATCH 08/10] Fix progress input overflow removed border-radius on big quota from the main settings page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/inputs.scss | 1 + core/css/styles.scss | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index de09db958a..832ccdebaa 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -478,6 +478,7 @@ progress { border-radius: 3px; flex-basis: 100%; height: 5px; + overflow: hidden; &.warn { &::-moz-progress-bar { background: $color-error; diff --git a/core/css/styles.scss b/core/css/styles.scss index 3b062250df..33618d3411 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -932,6 +932,12 @@ code { padding: 0 !important; progress { height: 36px; + &::-moz-progress-bar { + border-radius: 3px 0 0 3px; + } + &::-webkit-progress-value { + border-radius: 3px 0 0 3px; + } } div { font-weight: normal; From 13aed0b58dbb3a1f6cad0a001fb5b140dcec0fa6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 28 Sep 2017 16:23:28 +0200 Subject: [PATCH 09/10] Fix settings button state and opacity 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 + core/js/apps.js | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index 1812a13cb4..08bbc3ed3b 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -610,6 +610,7 @@ kbd { border-right: 1px solid $color-border; width: 250px; box-sizing: border-box; + background-color: $color-main-background; } .settings-button { diff --git a/core/js/apps.js b/core/js/apps.js index 4daab5ce4c..8aebbbd418 100644 --- a/core/js/apps.js +++ b/core/js/apps.js @@ -78,11 +78,15 @@ area.slideUp(OC.menuSpeed*4, function() { area.trigger(new $.Event('hide')); }); + area.removeClass('opened'); + $(button).removeClass('opened'); } function showArea() { area.slideDown(OC.menuSpeed*4, function() { area.trigger(new $.Event('show')); }); + area.addClass('opened'); + $(button).addClass('opened'); var input = $(areaSelector + ' [autofocus]'); if (input.length === 1) { input.focus(); From b9a8ba7a2361d6a1d1bbf6acf20abac58ac2ed91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 28 Sep 2017 16:33:47 +0200 Subject: [PATCH 10/10] Fix upload progress color to primary MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/css/upload.scss | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss index 6f337a2757..4685b20d43 100644 --- a/apps/files/css/upload.scss +++ b/apps/files/css/upload.scss @@ -50,28 +50,29 @@ text-align: center; } #uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left { - height: 100%; - top: 0px; - left: 0px; - position: absolute; - overflow: hidden; + height: 100%; + top: 0px; + left: 0px; + position: absolute; + overflow: hidden; + background-color: $color-primary; } #uploadprogressbar .label { - top: 6px; - opacity: 1; - overflow: hidden; - white-space: nowrap; + top: 6px; + opacity: 1; + overflow: hidden; + white-space: nowrap; font-weight: normal; } #uploadprogressbar .label.inner { - color:white; - position: absolute; - display: block; - width: 200px; + color: $color-primary-text; + position: absolute; + display: block; + width: 200px; } #uploadprogressbar .label.outer { - position: relative; - color: black; + position: relative; + color: $color-main-text; } #uploadprogressbar .desktop { display: block;