diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss
index 6f337a27578fb303fffa63e8712072f3dbfd0db9..4685b20d43a0eed8c68d9c32319d2988a937dc2c 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 09b02943688428c5f7b2b5a516e4af111711c362..6a7b4e4b11e36db9e09242156e4f244f6337178a 100644
--- a/apps/files/templates/appnavigation.php
+++ b/apps/files/templates/appnavigation.php
@@ -11,7 +11,7 @@
</a>
</li>
<?php } ?>
- <li id="quota" class="section pinned <?php
+ <li id="quota" class="pinned <?php
if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
?>has-tooltip" title="<?php p($_['usage_relative'] . '%');
} ?>">
@@ -23,9 +23,8 @@
p($l->t('%s used', [$_['usage']]));
} ?></p>
<div class="quota-container">
- <div style="width:<?php p($_['usage_relative']);?>%"
- <?php if($_['usage_relative'] > 80): ?>class="quota-warning"<?php endif; ?>>
- </div>
+ <progress value="<?php p($_['usage_relative']); ?>" max="100"
+ <?php if($_['usage_relative'] > 80): ?> class="quota-warning" <?php endif; ?>></progress>
</div>
</a>
</li>
diff --git a/core/css/apps.scss b/core/css/apps.scss
index b735dfa4d6435906691f7febbd79f578e53ec9f4..08bbc3ed3b2bb376aa3c8f6d2ba1d009c0a3c576 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 5fe65935ec51e4fa7a8381e5c5aeae2777c91f6c..832ccdebaa6e9f1fdd0099a9aacb9faa778cc6a4 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 be0b200ce358398c7ac04fb68180eec80929b011..33618d34117b7cb443f50a2091743d997df5f408 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 4daab5ce4c435f9cfee7347b904aed13c5e5b30e..8aebbbd418c3b8b7ae3967c0d888b2d074f435a7 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 cd0dd52651ab993229dbd0f16e5e66e2c00581e9..94f7da82640ef6c3b20c6c96b37f645ce2f81192 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 8a722896fa51a477b700d5571b50a050e99ec060..221dad33ac38c1cdb4f8eec39e1009613ae6ab8f 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 <th> - 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 6fb74e1ba6321ff92de30f70fe97c8607a694c43..4a4faf13ec7322b176fd3dd6098a71e8d7b663ca 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('<span class="icon icon-close"></span><span>' + t('settings', 'Disable') + '</span>');
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index 084b34af96c86914cb4efdabd99431637f3d43e3..d6f6061ebf2b94c4d54118afaf43e78df76a64b3 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');
?>
<div id="quota" class="section">
- <div style="width:<?php p($_['usage_relative']);?>%"
- <?php if($_['usage_relative'] > 80): ?> class="quota-warning" <?php endif; ?>>
- <p id="quotatext">
+ <progress value="<?php p($_['usage_relative']); ?>" max="100"
+ <?php if($_['usage_relative'] > 80): ?> class="quota-warning" <?php endif; ?>></progress>
+
+ <div style="width:<?php p($_['usage_relative']);?>%" class="quotatext-fg
+ <?php if($_['usage_relative'] > 80): ?> quota-warning <?php endif; ?>">
+ <p class="quotatext">
+ <?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?>
+ <?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>',
+ [$_['usage'], $_['total_space']]));?>
+ <?php else: ?>
+ <?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong> (<strong>%s %%</strong>)',
+ [$_['usage'], $_['total_space'], $_['usage_relative']]));?>
+ <?php endif ?>
+ </p>
+ </div>
+ <div class="quotatext-bg">
+ <p class="quotatext">
<?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?>
<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>',
[$_['usage'], $_['total_space']]));?>
diff --git a/settings/templates/users/part.userlist.php b/settings/templates/users/part.userlist.php
index 5ceda71fc001bfea99d10347d060dc56d0ae0d7c..146e35d11acd3b7e6ae88defdca5f4813bbf8cd8 100644
--- a/settings/templates/users/part.userlist.php
+++ b/settings/templates/users/part.userlist.php
@@ -43,7 +43,6 @@
</td>
<?php endif;?>
<td class="quota">
- <div class="quota_progress_container"><div class="quota_progress"></div></div>
<select class="quota-user" data-inputtitle="<?php p($l->t('Please enter storage quota (ex: "512 MB" or "12 GB")')) ?>">
<option value='default'>
<?php p($l->t('Default'));?>
@@ -60,12 +59,13 @@
<?php p($l->t('Other'));?> ...
</option>
</select>
+ <progress class="quota-user-progress" value="" max="100"></progress>
</td>
<td class="storageLocation"></td>
<td class="userBackend"></td>
<td class="lastLogin"></td>
<td class="userActions"><span></span>
- <div class="popovermenu bubble open menu">
+ <div class="popovermenu bubble menu">
<ul class="userActionsMenu">
<li>
<a href="#" class="menuitem action-togglestate permanent" data-action="togglestate"></a>