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; 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/apps.scss b/core/css/apps.scss index b735dfa4d6..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 { @@ -753,7 +754,7 @@ kbd { margin: 5px; margin-top: -5px; right: 0; - box-shadow: 0 1px 10px $color-box-shadow; + filter: drop-shadow(0 1px 3px $color-box-shadow); display: none; &:after { diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 5fe65935ec..832ccdebaa 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,40 @@ 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; + overflow: hidden; + &.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..33618d3411 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -925,31 +925,42 @@ code { font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace; } -#quota { +#body-settings #quota { cursor: default; margin: 30px !important; position: relative; 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 { - 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/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(); 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 8a722896fa..221dad33ac 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -579,42 +579,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 */ @@ -649,10 +613,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 { @@ -683,18 +661,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: 50; + 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; } } @@ -702,20 +692,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..4a4faf13ec 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( isNaN(usedQuota) ? 0 : usedQuota ); + if (usedQuota > 80) { + $tr.find('.quota-user-progress').addClass('warn'); + } else { + $tr.find('.quota-user-progress').removeClass('warn'); + } }, /** @@ -950,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/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']]));?> diff --git a/settings/templates/users/part.userlist.php b/settings/templates/users/part.userlist.php index 5ceda71fc0..146e35d11a 100644 --- a/settings/templates/users/part.userlist.php +++ b/settings/templates/users/part.userlist.php @@ -43,7 +43,6 @@ -

    + -
    +