From 0cff56b449d7f6515f0d6c3f03aff1d2df079c55 Mon Sep 17 00:00:00 2001 From: GretaD Date: Wed, 15 Jan 2020 15:48:48 +0100 Subject: [PATCH] fix indentation and 3 dot menu Signed-off-by: GretaD --- apps/settings/css/settings.scss | 2496 +++++++++++---------- apps/settings/src/components/UserList.vue | 4 +- 2 files changed, 1338 insertions(+), 1162 deletions(-) diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss index f94b4a9257..608bd1c3f6 100644 --- a/apps/settings/css/settings.scss +++ b/apps/settings/css/settings.scss @@ -3,1594 +3,1770 @@ See the COPYING-README file. */ input { - &#openid, &#webdav { - width: 20em; - } + &#openid, &#webdav { + width: 20em; + } } /* PERSONAL */ .clear { - clear: both; + clear: both; } /* icons for sidebar */ .nav-icon-personal-settings { - @include icon-color('personal', 'settings', $color-black); + @include icon-color('personal', 'settings', $color-black); } .nav-icon-security { - @include icon-color('toggle-filelist', 'settings', $color-black); + @include icon-color('toggle-filelist', 'settings', $color-black); } .nav-icon-clientsbox { - @include icon-color('change', 'settings', $color-black); + @include icon-color('change', 'settings', $color-black); } .nav-icon-federated-cloud { - @include icon-color('share', 'settings', $color-black); + @include icon-color('share', 'settings', $color-black); } .nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate { - @include icon-color('password', 'settings', $color-black); + @include icon-color('password', 'settings', $color-black); } #avatarform { - .avatardiv { - margin: 10px auto; - } - .warning { - width: 100%; - } - .jcrop-keymgr { - display: none !important; - } + .avatardiv { + margin: 10px auto; + } + + .warning { + width: 100%; + } + + .jcrop-keymgr { + display: none !important; + } } #displayavatar { - text-align: center; + text-align: center; } #uploadavatarbutton, #selectavatar, #removeavatar { - padding: 21px; + padding: 21px; } .jcrop-holder { - z-index: 500; + z-index: 500; } #cropper { - float: left; - z-index: 500; - /* float cropper above settings page to prevent unexpected flowing from dynamically sized element */ - position: fixed; - background-color: rgba(0, 0, 0, 0.2); - box-sizing: border-box; - top: 45px; - left: 0; - width: 100%; - height: calc(100% - 45px); - .inner-container { - z-index: 2001; - /* above the top bar if needed */ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: #fff; - color: #333; - border-radius: var(--border-radius-large); - box-shadow: 0 0 10px var(--color-box-shadow); - padding: 15px; - .jcrop-holder, - .jcrop-holder img, - img.jcrop-preview { - border-radius: var(--border-radius); - } + float: left; + z-index: 500; + /* float cropper above settings page to prevent unexpected flowing from dynamically sized element */ + position: fixed; + background-color: rgba(0, 0, 0, 0.2); + box-sizing: border-box; + top: 45px; + left: 0; + width: 100%; + height: calc(100% - 45px); - .button { - margin-top: 15px; - } - .primary { - float: right; - } + .inner-container { + z-index: 2001; + /* above the top bar if needed */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #fff; + color: #333; + border-radius: var(--border-radius-large); + box-shadow: 0 0 10px var(--color-box-shadow); + padding: 15px; + + .jcrop-holder, + .jcrop-holder img, + img.jcrop-preview { + border-radius: var(--border-radius); } + + .button { + margin-top: 15px; + } + + .primary { + float: right; + } + } } #personal-settings-avatar-container { - display: inline-grid; - grid-template-columns: 1fr; - grid-template-rows: 2fr 1fr; - vertical-align: top; + display: inline-grid; + grid-template-columns: 1fr; + grid-template-rows: 2fr 1fr; + vertical-align: top; } .profile-settings-container { - display: inline-grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr 2fr 1fr; + display: inline-grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 2fr 1fr; } .personal-show-container { - width: 100%; + width: 100%; } .personal-settings-setting-box input { - &[type='text'], &[type='email'], &[type='tel'], &[type='url'] { - width: 100%; - } + &[type='text'], &[type='email'], &[type='tel'], &[type='url'] { + width: 100%; + } } select { - &#timezone, - &#languageinput, - &#localeinput { - width: 100%; - } + &#timezone, + &#languageinput, + &#localeinput { + width: 100%; + } } #personal-settings { - display: grid; - padding: 20px; - max-width: 1500px; - grid-template-columns:1fr 2fr 1fr; - .section { - padding: 10px 10px; - border: 0; - h2 { - margin-bottom: 12px; - } - } - .personal-info { - margin-right: 10%; - margin-bottom: 12px; - margin-top: 12px; - } - .personal-info[class^='icon-'], .personal-info[class*=' icon-'] { - background-position: 0px 2px; - padding-left: 30px; - opacity: 0.7; + display: grid; + padding: 20px; + max-width: 1500px; + grid-template-columns: 1fr 2fr 1fr; + + .section { + padding: 10px 10px; + border: 0; + + h2 { + margin-bottom: 12px; } + } + + .personal-info { + margin-right: 10%; + margin-bottom: 12px; + margin-top: 12px; + } + + .personal-info[class^='icon-'], .personal-info[class*=' icon-'] { + background-position: 0px 2px; + padding-left: 30px; + opacity: 0.7; + } } @media (min-width: 1200px) and (max-width: 1400px) { - #personal-settings { - display: grid; - grid-template-columns: 1fr 2fr; - #personal-settings-avatar-container { - grid-template-columns: 1fr; - grid-template-rows: 1fr; - } - .personal-settings-container { - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr; - } - .profile-settings-container { - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - grid-column: 2; - } + #personal-settings { + display: grid; + grid-template-columns: 1fr 2fr; + + #personal-settings-avatar-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr; } + + .personal-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + } + + .profile-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + grid-column: 2; + } + } } @media (max-width: 1200px) { - #personal-settings { - display: grid; - grid-template-columns: 1fr; - #personal-settings-avatar-container { - grid-template-rows: 1fr; - } - .personal-settings-container { - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr; - } - .profile-settings-container { - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - } + #personal-settings { + display: grid; + grid-template-columns: 1fr; + + #personal-settings-avatar-container { + grid-template-rows: 1fr; } + + .personal-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + } + + .profile-settings-container { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + } + } } @media (max-width: 560px) { - #personal-settings { - display: grid; - grid-template-columns: 1fr; - #personal-settings-avatar-container { - grid-template-rows: 1fr; - } - .personal-settings-container { - grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; - } - .profile-settings-container { - grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr; - } + #personal-settings { + display: grid; + grid-template-columns: 1fr; + + #personal-settings-avatar-container { + grid-template-rows: 1fr; } + + .personal-settings-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; + } + + .profile-settings-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + } + } } .personal-settings-container { - display: inline-grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr 2fr; - &:after { - clear: both; - } - > div { - h3 { - position: relative; - display: inline-flex; - flex-wrap: nowrap; - justify-content: flex-start; - width: 100%; + display: inline-grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 2fr; - > label { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - > form span { - &[class^='icon-checkmark'], &[class^='icon-error'] { - position: relative; - right: 8px; - top: -28px; - pointer-events: none; - float: right; - } - } + &:after { + clear: both; + } + + > div { + h3 { + position: relative; + display: inline-flex; + flex-wrap: nowrap; + justify-content: flex-start; + width: 100%; + + > label { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } } - .verify { + + > form span { + &[class^='icon-checkmark'], &[class^='icon-error'] { position: relative; - left: 100%; - top: 0; - height: 0; - img { - padding: 12px 7px 6px; - } + right: 8px; + top: -28px; + pointer-events: none; + float: right; + } } - .verify-action { - cursor: pointer; - } - input:disabled { - background-color: white; - color: black; - border: none; - opacity: 100; + } + + .verify { + position: relative; + left: 100%; + top: 0; + height: 0; + + img { + padding: 12px 7px 6px; } + } + + .verify-action { + cursor: pointer; + } + + input:disabled { + background-color: white; + color: black; + border: none; + opacity: 100; + } } #body-settings #quota { - cursor: default; - position: relative; - progress { - height: 6px; - &::-moz-progress-bar { - border-radius: 3px 0 0 3px; - } - &::-webkit-progress-value { - border-radius: 3px 0 0 3px; - } + cursor: default; + position: relative; + + progress { + height: 6px; + + &::-moz-progress-bar { + border-radius: 3px 0 0 3px; } - div { - font-weight: normal; - white-space: nowrap; + + &::-webkit-progress-value { + border-radius: 3px 0 0 3px; } + } + + div { + font-weight: normal; + white-space: nowrap; + } } /* verify accounts */ /* only show pointer cursor when popup will be there */ .verification-dialog { - display: none; - right: -9px; - top: 40px; - width: 275px; - p { - padding: 10px; - } - .verificationCode { - font-family: monospace; - display: block; - overflow-wrap: break-word; - } + display: none; + right: -9px; + top: 40px; + width: 275px; + + p { + padding: 10px; + } + + .verificationCode { + font-family: monospace; + display: block; + overflow-wrap: break-word; + } } .federation-menu { - position: relative; - cursor: pointer; - margin-left: 10px; - &:focus { - .icon-federation-menu { - opacity: 0.7; - } - } + position: relative; + cursor: pointer; + margin-left: 10px; + + &:focus { .icon-federation-menu { - padding-left: 16px; - background-size: 16px; - background-position: left center; - opacity: .3; - cursor: inherit; - .icon-triangle-s { - display: inline-block; - vertical-align: middle; - cursor: inherit; - } + opacity: 0.7; } - .federationScopeMenu { - top: 44px; - &.popovermenu { - .menuitem { - // override h3 heading font size - font-size: 12.8px; - line-height: 1.6em; - .menuitem-text-detail { - opacity: .75; - } - &.active { - box-shadow: inset 2px 0 var(--color-primary); - .menuitem-text { - font-weight: bold; - } - } - } - } + } + + .icon-federation-menu { + padding-left: 16px; + background-size: 16px; + background-position: left center; + opacity: .3; + cursor: inherit; + + .icon-triangle-s { + display: inline-block; + vertical-align: middle; + cursor: inherit; } + } + + .federationScopeMenu { + top: 44px; + + &.popovermenu { + .menuitem { + // override h3 heading font size + font-size: 12.8px; + line-height: 1.6em; + + .menuitem-text-detail { + opacity: .75; + } + + &.active { + box-shadow: inset 2px 0 var(--color-primary); + + .menuitem-text { + font-weight: bold; + } + } + } + } + } } #groups-groups { - padding-top: 5px; + padding-top: 5px; } .clientsbox img { - height: 60px; + height: 60px; } #sslCertificate { - tr.expired { - background-color: rgba(255, 0, 0, 0.5); - } - td { - padding: 5px; - } + tr.expired { + background-color: rgba(255, 0, 0, 0.5); + } + + td { + padding: 5px; + } } #displaynameerror, #displaynamechanged { - display: none; + display: none; } input#identity { - width: 20em; + width: 20em; } #showWizard { - display: inline-block; + display: inline-block; } .msg { - &.success { - color: #fff; - background-color: #47a447; - padding: 3px; - } - &.error { - color: #fff; - background-color: #d2322d; - padding: 3px; - } -} + &.success { + color: #fff; + background-color: #47a447; + padding: 3px; + } + &.error { + color: #fff; + background-color: #d2322d; + padding: 3px; + } +} table.nostyle { - label { - margin-right: 2em; - } - td { - padding: 0.2em 0; - } + label { + margin-right: 2em; + } + + td { + padding: 0.2em 0; + } } #security-password { - #passwordform { - display: flex; - flex-wrap: wrap; - #pass1, .personal-show-container, #passwordbutton { - flex-shrink: 1; - width: 200px; - min-width: 150px; - } - #pass2 { - width: 100%; - } - .password-state { - display: inline-block; - } - .strengthify-wrapper { - position: absolute; - left: 0; - width: 100%; - border-radius: 0 0 2px 2px; - margin-top: -6px; - overflow: hidden; - height: 3px; - } + #passwordform { + display: flex; + flex-wrap: wrap; + + #pass1, .personal-show-container, #passwordbutton { + flex-shrink: 1; + width: 200px; + min-width: 150px; } + + #pass2 { + width: 100%; + } + + .password-state { + display: inline-block; + } + + .strengthify-wrapper { + position: absolute; + left: 0; + width: 100%; + border-radius: 0 0 2px 2px; + margin-top: -6px; + overflow: hidden; + height: 3px; + } + } } /* Two-Factor Authentication (2FA) */ #two-factor-auth { - h3 { - margin-top: 24px; - } + h3 { + margin-top: 24px; + } - li > div { - margin-left: 20px; - } + li > div { + margin-left: 20px; + } - .two-factor-provider-settings-icon { - width: 16px; - height: 16px; - vertical-align: sub; - } + .two-factor-provider-settings-icon { + width: 16px; + height: 16px; + vertical-align: sub; + } } .social-button { - padding-left: 0 !important; - margin-left: -10px; - img { - padding: 10px; - } + padding-left: 0 !important; + margin-left: -10px; + + img { + padding: 10px; + } } /* USERS */ .isgroup { - .groupname { - width: 85%; - display: block; - overflow: hidden; - text-overflow: ellipsis; - } - &.active .groupname { - width: 65%; - } + .groupname { + width: 85%; + display: block; + overflow: hidden; + text-overflow: ellipsis; + } + + &.active .groupname { + width: 65%; + } } li.active { - .delete, - .rename { - display: block; - } + .delete, + .rename { + display: block; + } } .app-navigation-entry-utils { - .delete, - .rename { - display: none; - } + .delete, + .rename { + display: none; + } } #usersearchform { - position: absolute; - top: 2px; - right: 0; - input { - width: 150px; - } - label { - font-weight: bold; - } + position: absolute; + top: 2px; + right: 0; + + input { + width: 150px; + } + + label { + font-weight: bold; + } } /* display table at full width */ table.grid { - width: 100%; - th { - height: 2em; - color: #999; - border-bottom: 1px solid var(--color-border); - padding: 0 .5em; - padding-left: .8em; - text-align: left; - font-weight: normal; - } - td { - border-bottom: 1px solid var(--color-border); - padding: 0 .5em; - padding-left: .8em; - text-align: left; - font-weight: normal; - } + width: 100%; + + th { + height: 2em; + color: #999; + border-bottom: 1px solid var(--color-border); + padding: 0 .5em; + padding-left: .8em; + text-align: left; + font-weight: normal; + } + + td { + border-bottom: 1px solid var(--color-border); + padding: 0 .5em; + padding-left: .8em; + text-align: left; + font-weight: normal; + } } td, th { - &.name { - padding-left: .8em; - min-width: 5em; - max-width: 12em; - text-overflow: ellipsis; - overflow: hidden; + &.name { + padding-left: .8em; + min-width: 5em; + max-width: 12em; + text-overflow: ellipsis; + overflow: hidden; + } + + &.password { + padding-left: .8em; + + > img { + visibility: hidden; } - &.password { - padding-left: .8em; - > img { - visibility: hidden; - } - } - &.displayName > img { - visibility: hidden; - } - &.password, - &.mailAddress { - min-width: 5em; - max-width: 12em; - cursor: pointer; - span { - width: 90%; - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - } - } - &.mailAddress { - cursor: pointer; - } - &.password > span { - margin-right: 1.2em; - color: #C7C7C7; + } + + &.displayName > img { + visibility: hidden; + } + + &.password, + &.mailAddress { + min-width: 5em; + max-width: 12em; + cursor: pointer; + + span { + width: 90%; + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; } + } + + &.mailAddress { + cursor: pointer; + } + + &.password > span { + margin-right: 1.2em; + color: #C7C7C7; + } } span.usersLastLoginTooltip { - white-space: nowrap; + white-space: nowrap; } /* dropdowns will be relative to this element */ #userlist { + position: relative; + + .storageLocation, .userBackend, .lastLogin { + display: none; + } + + th.name { + color: #000; + } + + tr { + height: 50px; + } + + .mailAddress .loading-small { + width: 16px; + height: 16px; + margin-left: -26px; position: relative; - .storageLocation, .userBackend, .lastLogin { - display: none; - } - th.name { - color: #000; - } - tr { - height: 50px; - } - .mailAddress .loading-small { - width: 16px; - height: 16px; - margin-left: -26px; - position: relative; - top: 3px; - } - .groupsListContainer.hidden { - display: none; - } - thead th, - thead tr { - z-index: 100; - background-color: var(--color-main-background); - @include position('sticky'); - // positional attribute is required for position to take affect. - top: 0; - } + top: 3px; + } + + .groupsListContainer.hidden { + display: none; + } + + thead th, + thead tr { + z-index: 100; + background-color: var(--color-main-background); + @include position('sticky'); + // positional attribute is required for position to take affect. + top: 0; + } } #newuser { - .groupsListContainer.hidden { - display: none; + .groupsListContainer.hidden { + display: none; + } + + .multiselect { + min-width: 150px !important; + position: relative; + top: -1px; + } + + input { + &:not([type='submit']), + &:not([type='reset']) { + width: 100%; } - .multiselect { - min-width: 150px !important; - position: relative; - top: -1px; + } + + .userActions { + position: sticky; + right: 60px; + z-index: 20; + } + + .userActions input { + width: 44px; + height: 44px; + + &.icon-close { + border: none; + background-color: initial; + opacity: .5; } - input { - &:not([type='submit']), - &:not([type='reset']) { - width: 100%; - } - } - .userActions { - position: sticky; - right: 60px; - z-index: 20; - } - .userActions input { - width: 44px; - height: 44px; - &.icon-close { - border: none; - background-color: initial; - opacity: .5; - } - &:hover { - opacity: 1; - } + + &:hover { + opacity: 1; } + } } /* used to highlight a user row in red */ #userlist tr.row-warning { - background-color: #FDD; + background-color: #FDD; } /* APPS */ #app-content > svg.app-filter { - float: left; - height: 0; - width: 0; + float: left; + height: 0; + width: 0; } #app-category-app-bundles { - margin-bottom: 20px; + margin-bottom: 20px; } .appinfo { - margin: 1em 40px; + margin: 1em 40px; } #app-navigation { - /* Navigation icons */ - img { - margin-bottom: -3px; - margin-right: 6px; - width: 16px; - } - li span.no-icon { - padding-left: 32px; - } - ul li.active > span.utils { - .delete, .rename { - display: block; - } - } - .appwarning { - background: #fcc; - } - &.appwarning:hover { - background: #fbb; - } - .app-external { - color: var(--color-text-maxcontrast); + /* Navigation icons */ + img { + margin-bottom: -3px; + margin-right: 6px; + width: 16px; + } + + li span.no-icon { + padding-left: 32px; + } + + ul li.active > span.utils { + .delete, .rename { + display: block; } + } + + .appwarning { + background: #fcc; + } + + &.appwarning:hover { + background: #fbb; + } + + .app-external { + color: var(--color-text-maxcontrast); + } } span.version { - margin-left: 1em; - margin-right: 1em; - color: var(--color-text-maxcontrast); + margin-left: 1em; + margin-right: 1em; + color: var(--color-text-maxcontrast); } .app-version { - color: var(--color-text-maxcontrast); + color: var(--color-text-maxcontrast); } .app-level { - margin-top: 8px; - span { - color: var(--color-text-maxcontrast); - background-color: transparent; - border: 1px solid var(--color-text-maxcontrast); - border-radius: var(--border-radius); - padding: 3px 6px; - } - a { - padding: 10px; - margin: -6px; - white-space: nowrap; - } - .official { - background-position: left center; - background-position: 5px center; - padding-left: 25px; - } - .supported { - border-color: var(--color-success); - background-position: left center; - background-position: 5px center; - padding-left: 25px; - color: var(--color-success) ; - } + margin-top: 8px; + + span { + color: var(--color-text-maxcontrast); + background-color: transparent; + border: 1px solid var(--color-text-maxcontrast); + border-radius: var(--border-radius); + padding: 3px 6px; + } + + a { + padding: 10px; + margin: -6px; + white-space: nowrap; + } + + .official { + background-position: left center; + background-position: 5px center; + padding-left: 25px; + } + + .supported { + border-color: var(--color-success); + background-position: left center; + background-position: 5px center; + padding-left: 25px; + color: var(--color-success); + } } .app-score { - position: relative; - top: 4px; - opacity: .5; + position: relative; + top: 4px; + opacity: .5; } .app-settings-content { - #searchresults { - display: none; - } + #searchresults { + display: none; + } } + #apps-list.store { - .section { - border: 0; - } - .app-name { - display: block; - margin: 5px 0; - } - .app-name, .app-image * { - cursor: pointer; - } - .app-summary { - opacity: .7; - } - .app-image-icon .icon-settings-dark { - width: 100%; - height: 150px; - background-size: 45px; - opacity: 0.5; - } - .app-score-image { - height: 14px; - } - .actions { - margin-top: 10px; - } + .section { + border: 0; + } + + .app-name { + display: block; + margin: 5px 0; + } + + .app-name, .app-image * { + cursor: pointer; + } + + .app-summary { + opacity: .7; + } + + .app-image-icon .icon-settings-dark { + width: 100%; + height: 150px; + background-size: 45px; + opacity: 0.5; + } + + .app-score-image { + height: 14px; + } + + .actions { + margin-top: 10px; + } } #app-sidebar #app-details-view { - h2 { - .icon-settings-dark, - svg { - display: inline-block; - width: 16px; - height: 16px; - margin-right: 10px; - opacity: .7; - } + h2 { + .icon-settings-dark, + svg { + display: inline-block; + width: 16px; + height: 16px; + margin-right: 10px; + opacity: .7; } - .app-level { - clear: right; - width: 100%; - .supported, - .official { - vertical-align: top; - } - .app-score-image { - float: right; - } - } - .app-author, .app-licence { - color: var(--color-text-maxcontrast); - } - .app-dependencies { - margin: 10px 0; - } - .app-description p { - margin: 10px 0; - } - .close { - position: absolute; - top: 0; - right: 0; - padding: 14px; - opacity: 0.5; - z-index: 1; - width: 44px; - height: 44px; - } - .actions { - display: flex; - align-items: center; + } - .app-groups{ - padding: 5px; - } + .app-level { + clear: right; + width: 100%; + + .supported, + .official { + vertical-align: top; } - .appslink { - text-decoration: underline; - margin-right: 5px; + + .app-score-image { + float: right; } - .app-level, - .actions, - .documentation, - .app-dependencies, - .app-description { - margin: 20px 0; + } + + .app-author, .app-licence { + color: var(--color-text-maxcontrast); + } + + .app-dependencies { + margin: 10px 0; + } + + .app-description p { + margin: 10px 0; + } + + .close { + position: absolute; + top: 0; + right: 0; + padding: 14px; + opacity: 0.5; + z-index: 1; + width: 44px; + height: 44px; + } + + .actions { + display: flex; + align-items: center; + + .app-groups { + padding: 5px; } + } + + .appslink { + text-decoration: underline; + margin-right: 5px; + } + + .app-level, + .actions, + .documentation, + .app-dependencies, + .app-description { + margin: 20px 0; + } } @media only screen and (min-width: 1601px) { - .store .section { - width: 25%; - } - .with-app-sidebar .store .section { - width: 33%; - } + .store .section { + width: 25%; + } + .with-app-sidebar .store .section { + width: 33%; + } } @media only screen and (max-width: 1600px) { - .store .section { - width: 25%; - } - .with-app-sidebar .store .section { - width: 33%; - } + .store .section { + width: 25%; + } + .with-app-sidebar .store .section { + width: 33%; + } } @media only screen and (max-width: 1400px) { - .store .section { - width: 33%; - } - .with-app-sidebar .store .section { - width: 50%; - } + .store .section { + width: 33%; + } + .with-app-sidebar .store .section { + width: 50%; + } } @media only screen and (max-width: 900px) { - .store .section { - width: 50%; - } - .with-app-sidebar .store .section { - width: 100%; - } + .store .section { + width: 50%; + } + .with-app-sidebar .store .section { + width: 100%; + } } @media only screen and (max-width: $breakpoint-mobile) { - .store .section { - width: 50%; - } + .store .section { + width: 50%; + } } @media only screen and (max-width: 480px) { - .store .section { - width: 100%; - } + .store .section { + width: 100%; + } } /* hide app version and level on narrower screens */ @media only screen and (max-width: 900px) { - .apps-list.installed { - .app-version, .app-level { - display: none !important; - } + .apps-list.installed { + .app-version, .app-level { + display: none !important; } + } } @media only screen and (max-width: 500px) { - .apps-list.installed .app-groups { - display: none !important; - } + .apps-list.installed .app-groups { + display: none !important; + } } #version.section { - border-bottom: none; + border-bottom: none; } .section { - margin-bottom: 0; - /* section divider lines, none needed for last one */ - &:not(:last-child) { - border-bottom: 1px solid var(--color-border); - } + margin-bottom: 0; + /* section divider lines, none needed for last one */ + &:not(:last-child) { + border-bottom: 1px solid var(--color-border); + } - /* correctly display help icons next to headings */ - h2 { - margin-bottom: 22px; - .icon-info { - padding: 6px 20px; - vertical-align: text-bottom; - display: inline-block; - } + /* correctly display help icons next to headings */ + h2 { + margin-bottom: 22px; + + .icon-info { + padding: 6px 20px; + vertical-align: text-bottom; + display: inline-block; } + } } .personal-settings-setting-box .section { - padding: 10px 30px; + padding: 10px 30px; } .followupsection { - display: block; - padding: 0 30px 30px 30px; - color: #555; + display: block; + padding: 0 30px 30px 30px; + color: #555; } .app-image { - position: relative; - height: 150px; - opacity: 1; - overflow: hidden; + position: relative; + height: 150px; + opacity: 1; + overflow: hidden; } .app-name, .app-version, .app-score, .app-level { - display: inline-block; + display: inline-block; } .app-description-toggle-show, .app-description-toggle-hide { - clear: both; - padding: 7px 0; - cursor: pointer; - opacity: .5; + clear: both; + padding: 7px 0; + cursor: pointer; + opacity: .5; } .app-description-container { - clear: both; - position: relative; - top: 7px; + clear: both; + position: relative; + top: 7px; } .app-description { - clear: both; + clear: both; } #app-category-1 { - margin-bottom: 18px; + margin-bottom: 18px; } /* capitalize 'Other' category */ #app-category-925 { - text-transform: capitalize; + text-transform: capitalize; } .app-dependencies { - color: #ce3702; + color: #ce3702; } .missing-dependencies { - list-style: initial; - list-style-type: initial; - list-style-position: inside; + list-style: initial; + list-style-type: initial; + list-style-position: inside; } .apps-list { + .section { + cursor: pointer; + } + + .app-list-move { + transition: transform 1s; + } + + #app-list-update-all { + margin-left: 10px; + } + + .counter { + padding-left: $header-height - 10px; + margin: 10px; + } + + &.installed { + .apps-list-container { + display: table; + width: 100%; + height: auto; + } + + margin-bottom: 100px; + .section { - cursor: pointer; + display: table-row; + padding: 0; + margin: 0; + + > * { + display: table-cell; + height: initial; + vertical-align: middle; + float: none; + border-bottom: 1px solid var(--color-border); + padding: 6px; + box-sizing: border-box; + } + + &.selected { + background-color: var(--color-background-dark); + } + } - .app-list-move { - transition: transform 1s; - } - #app-list-update-all { - margin-left: 10px; - } - .counter { - padding-left: $header-height - 10px; - margin: 10px; - } - &.installed { - .apps-list-container { - display: table; - width: 100%; - height: auto; - } - margin-bottom: 100px; - .section { - display: table-row; - padding: 0; - margin: 0; - > * { - display: table-cell; - height: initial; - vertical-align: middle; - float: none; - border-bottom: 1px solid var(--color-border); - padding: 6px; - box-sizing: border-box; - } - &.selected { - background-color: var(--color-background-dark); - } + .groups-enable { + margin-top: 0; - } - .groups-enable { - margin-top: 0; - label { - margin-right: 3px; - } - } - .app-image { - width: 44px; - height: auto; - text-align: right; - } - .app-image-icon svg, - .app-image-icon .icon-settings-dark { - margin-top: 5px; - width: 20px; - height: 20px; - opacity: .5; - background-size: cover; - display: inline-block; - } - .actions { - text-align: right; - .icon-loading-small { - display: inline-block; - top: 4px; - margin-right: 10px; - } - } + label { + margin-right: 3px; + } } - &:not(.installed) .app-image-icon svg { - position: absolute; - bottom: 43px; - /* position halfway vertically */ - width: 64px; - height: 64px; - opacity: .1; + + .app-image { + width: 44px; + height: auto; + text-align: right; } - display: flex; - flex-wrap: wrap; - align-content: flex-start; - &.hidden { - display: none; + + .app-image-icon svg, + .app-image-icon .icon-settings-dark { + margin-top: 5px; + width: 20px; + height: 20px; + opacity: .5; + background-size: cover; + display: inline-block; } - .section { + + .actions { + text-align: right; + + .icon-loading-small { + display: inline-block; + top: 4px; + margin-right: 10px; + } + } + } + + &:not(.installed) .app-image-icon svg { + position: absolute; + bottom: 43px; + /* position halfway vertically */ + width: 64px; + height: 64px; + opacity: .1; + } + + display: flex; + flex-wrap: wrap; + align-content: flex-start; + + &.hidden { + display: none; + } + + .section { + position: relative; + flex: 0 0 auto; + + h2.app-name { + display: block; + margin: 8px 0; + } + + &:hover { + background-color: var(--color-background-dark); + } + } + + .app-description { + p { + margin: 10px 0; + } + + ul { + list-style: disc; + } + + ol { + list-style: decimal; + + ol, ul { + padding-left: 15px; + } + } + + > { + ul, ol { + margin-left: 19px; + } + } + + ul { + ol, ul { + padding-left: 15px; + } + } + } + + /* Bundle header */ + .apps-header { + display: table-row; + position: relative; + + div { + display: table-cell; + height: 70px; + } + + h2 { + display: table-cell; + position: absolute; + padding-left: 6px; + padding-top: 15px; + + .enable { position: relative; - flex: 0 0 auto; + top: -1px; + margin-left: 12px; + } - h2.app-name { - display: block; - margin: 8px 0; - } - &:hover { - background-color: var(--color-background-dark); - } - } - .app-description { - p { - margin: 10px 0; - } - ul { - list-style: disc; - } - ol { - list-style: decimal; - ol, ul { - padding-left: 15px; - } - } - > { - ul, ol { - margin-left: 19px; - } - } - ul { - ol, ul { - padding-left: 15px; - } - } - } - /* Bundle header */ - .apps-header { - display: table-row; - position: relative; - div { - display: table-cell; - height: 70px; - } - h2 { - display: table-cell; - position: absolute; - padding-left: 6px; - padding-top: 15px; - - .enable { - position: relative; - top: -1px; - margin-left: 12px; - } - + .section { - margin-top: 50px; - } - } + + .section { + margin-top: 50px; + } } + } } #apps-list-search { - .section { - h2 { - margin-bottom: 0; - } + .section { + h2 { + margin-bottom: 0; } + } } /* LOG */ #log { - white-space: normal; - margin-bottom: 14px; + white-space: normal; + margin-bottom: 14px; } #lessLog { - display: none; + display: none; } table.grid td.date { - white-space: nowrap; + white-space: nowrap; } #log-section p { - margin-top: 20px; + margin-top: 20px; } #security-warning-state-ok, #security-warning-state-warning, #security-warning-state-failure, #security-warning-state-loading { - span { - vertical-align: middle; + span { + vertical-align: middle; - &.message { - padding: 12px; - } - &.icon { - width: 32px; - height: 32px; - background-position: center center; - display: inline-block; - border-radius: 50%; - } - &.icon-checkmark-white { - background-color: var(--color-success); - } - &.icon-error-white { - background-color: var(--color-warning); - } - &.icon-close-white { - background-color: var(--color-error); - } + &.message { + padding: 12px; } + + &.icon { + width: 32px; + height: 32px; + background-position: center center; + display: inline-block; + border-radius: 50%; + } + + &.icon-checkmark-white { + background-color: var(--color-success); + } + + &.icon-error-white { + background-color: var(--color-warning); + } + + &.icon-close-white { + background-color: var(--color-error); + } + } } #shareAPI { - p { - padding-bottom: 0.8em; - } - input#shareapiExpireAfterNDays { - width: 40px; - } - .indent { - padding-left: 28px; - } - .double-indent { - padding-left: 56px; - } - .nocheckbox { - padding-left: 20px; - } + p { + padding-bottom: 0.8em; + } + + input#shareapiExpireAfterNDays { + width: 40px; + } + + .indent { + padding-left: 28px; + } + + .double-indent { + padding-left: 56px; + } + + .nocheckbox { + padding-left: 20px; + } } #shareApiDefaultPermissionsSection label { - margin-right: 20px; + margin-right: 20px; } #fileSharingSettings h3 { - display: inline-block; + display: inline-block; } #publicShareDisclaimerText { - width: calc(100% - 23px); - /* 20 px left margin, 3 px right margin */ - max-width: 600px; - height: 150px; - margin-left: 20px; - box-sizing: border-box; + width: calc(100% - 23px); + /* 20 px left margin, 3 px right margin */ + max-width: 600px; + height: 150px; + margin-left: 20px; + box-sizing: border-box; } /* correctly display help icons next to headings */ .icon-info { - padding: 11px 20px; - vertical-align: text-bottom; - opacity: .5; + padding: 11px 20px; + vertical-align: text-bottom; + opacity: .5; } #two-factor-auth h2, #shareAPI h2, #encryptionAPI h2, #mail_general_settings h2 { - display: inline-block; + display: inline-block; } #encryptionAPI li { - list-style-type: initial; - margin-left: 20px; - padding: 5px 0; + list-style-type: initial; + margin-left: 20px; + padding: 5px 0; } .mail_settings p { - label:first-child { - display: inline-block; - width: 300px; - text-align: right; - } - select:nth-child(2), - input:not([type='button']) { - width: 143px; - } + label:first-child { + display: inline-block; + width: 300px; + text-align: right; + } + + select:nth-child(2), + input:not([type='button']) { + width: 143px; + } } #mail_smtpport { - width: 40px; + width: 40px; } .cronlog { - margin-left: 10px; + margin-left: 10px; } .status { - display: inline-block; - height: 16px; - width: 16px; - vertical-align: text-bottom; - &.success { - border-radius: 50%; - } + display: inline-block; + height: 16px; + width: 16px; + vertical-align: text-bottom; + + &.success { + border-radius: 50%; + } } #selectGroups select { - box-sizing: border-box; - display: inline-block; - height: 36px; - padding: 7px 10px; + box-sizing: border-box; + display: inline-block; + height: 36px; + padding: 7px 10px; } #log .log-message { - word-break: break-all; - min-width: 180px; + word-break: break-all; + min-width: 180px; } span { - &.success { - background-color: var(--color-success); - border-radius: var(--border-radius); - } - &.error { - background-color: var(--color-error); - } - &.indeterminate { - background-color: var(--color-warning); - border-radius: 40% 0; - } -} + &.success { + background-color: var(--color-success); + border-radius: var(--border-radius); + } + &.error { + background-color: var(--color-error); + } + + &.indeterminate { + background-color: var(--color-warning); + border-radius: 40% 0; + } +} /* OPERA hack for strengthify*/ doesnotexist:-o-prefocus, .strengthify-wrapper { - left: 185px; - width: 129px; + left: 185px; + width: 129px; } .trusted-domain-warning { - color: #fff; - padding: 5px; - background: #ce3702; - border-radius: 5px; - font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; + color: #fff; + padding: 5px; + background: #ce3702; + border-radius: 5px; + font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; } /* HELP */ .help-includes { - overflow: hidden !important; + overflow: hidden !important; } .help-iframe { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - border: 0; - overflow: auto; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border: 0; + overflow: auto; } #postsetupchecks { + ul { + margin-left: 44px; + list-style: disc; + + li { + margin: 10px 0; + } + ul { - margin-left: 44px; - list-style: disc; + list-style: circle; + } + } - li { - margin: 10px 0; - } + .loading { + height: 50px; + background-position: left center; + } - ul { - list-style: circle; - } - } + .errors, .errors a { + color: var(--color-error); + } - .loading { - height: 50px; - background-position: left center; - } - .errors, .errors a { - color: var(--color-error); - } - .warnings, .warnings a { - color: var(--color-warning); - } + .warnings, .warnings a { + color: var(--color-warning); + } - .hint { - margin: 20px 0; - } + .hint { + margin: 20px 0; + } } #security-warning { - a { - text-decoration: underline; - } + a { + text-decoration: underline; + } - .extra-top-margin { - margin-top: 12px; - } + .extra-top-margin { + margin-top: 12px; + } } #admin-tips li { - list-style: initial; - a { - display: inline-block; - padding: 3px 0; - } + list-style: initial; + + a { + display: inline-block; + padding: 3px 0; + } } #selectEncryptionModules { - margin-left: 30px; - padding: 10px; + margin-left: 30px; + padding: 10px; } #encryptionModules { - padding: 10px; + padding: 10px; } #warning { - color: red; + color: red; } .settings-hint { - margin-top: -12px; - margin-bottom: 12px; - opacity: .7; + margin-top: -12px; + margin-bottom: 12px; + opacity: .7; } /* USERS LIST -------------------------------------------------------------- */ #body-settings { - $grid-row-height: 60px; - $grid-col-min-width: 150px; - #app-content.user-list-grid { - display: grid; - grid-auto-columns: 1fr; - grid-auto-rows: $grid-row-height; - grid-column-gap: 20px; + $grid-row-height: 60px; + $grid-col-min-width: 150px; + + #app-content.user-list-grid { + display: grid; + grid-auto-columns: 1fr; + grid-auto-rows: $grid-row-height; + grid-column-gap: 20px; + + .row { + // TODO replace with css4 subgrid when available + // fallback for ie11 no grid + display: flex; + display: grid; + grid-row-start: span 1; + grid-gap: 3px; + align-items: center; + z-index: 0; + /* let's define the column until storage path, + what follows will be manually defined */ + grid-template-columns: 44px minmax($grid-col-min-width + 30px, 1fr) repeat(auto-fit, minmax($grid-col-min-width, 1fr)); + border-bottom: var(--color-border) 1px solid; + + &.disabled { + opacity: .5; + } + + /* grid col width */ + .name, + .password, + .mailAddress, + .languages, + .storageLocation, + .userBackend, + .lastLogin { + min-width: $grid-col-min-width; + display: flex; + color: var(--color-text-dark); + vertical-align: baseline; + } + + .groups, + .subadmins, + .quota { + .multiselect { + min-width: $grid-col-min-width; + color: var(--color-text-dark); + vertical-align: baseline; + } + } + + .obfuscated { + width: 400px; + opacity: .7; + } + + .userActions { + min-width: 44px; + position: sticky; + right: 40px; + z-index: 109; + } + + .subtitle { + color: var(--color-text-maxcontrast); + vertical-align: baseline; + } + + /* various */ + &#grid-header, + &#new-user { + @include position('sticky'); + align-self: normal; + background-color: var(--color-main-background); + z-index: 100; /* above multiselect */ + top: $header-height; + + &.sticky { + box-shadow: 0 -2px 10px 1px var(--color-box-shadow); + } + + /* fake input for groups validation */ + input#newgroups { + position: absolute; + opacity: 0; + width: 80% !important; + margin: 0 10%; + z-index: 0; + } + } + + // separate prop to set initial value to top: 50px + &#new-user { + height: 120px; + .row { - // TODO replace with css4 subgrid when available - // fallback for ie11 no grid - display: flex; - display: grid; - grid-row-start: span 1; - grid-gap: 3px; + padding-top: 50px; + } + } + + &#grid-header { + color: var(--color-text-maxcontrast); + z-index: 60; /* above new-user */ + border-bottom-width: thin; + + #headerDisplayName, + #headerPassword, + #headerAddress, + #headerGroups, + #headerSubAdmins, + #theHeaderUserBackend, + #theHeaderLastLogin, + #headerQuota, + #theHeaderStorageLocation, + #headerLanguages { + /* Line up header text with column content for when there’s inputs */ + padding-left: 7px; + text-transform: none; + color: var(--color-text-maxcontrast); + vertical-align: baseline; + } + } + + &:hover { + input:not([type='submit']):not(:focus):not(:active) { + border-color: var(--color-border) !important; + } + + &:not(#grid-header) { + box-shadow: 5px 0 0 var(--color-primary-element) inset; + } + } + + > div, + > form { + grid-row: 1; + display: inline-flex; + color: var(--color-text-lighter); + position: relative; + + > input:not(:focus):not(:active) { + border-color: transparent; + cursor: pointer; + } + + > input:focus, > input:active { + + .icon-confirm { + display: block !important; + } + } + + /* inputs like mail, username, password */ + &:not(.userActions) > input:not([type='submit']) { + width: 100%; + min-width: 0; + } + + &.name { + word-break: break-all; + } + + &.displayName, + &.mailAddress { + > input { + text-overflow: ellipsis; + } + } + + &.name, + &.userBackend { + /* better multi-line visual */ + line-height: 1.3em; + max-height: 100%; + overflow: hidden; + /* not supported by all browsers + so we keep the overflow hidden + as a fallback */ + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + + &.quota { + height: 44px; + display: flex; + align-items: center; + justify-content: center; + + progress { + width: 100%; + margin: 0 10px; + height: 3px; + } + } + + .icon-confirm { + flex: 0 0 auto; + cursor: pointer; + + &:not(:active) { + display: none; + } + } + + &.avatar { + height: 32px; + width: 32px; + margin: 6px; + + img { + display: block; + } + } + + &.userActions { + .action-item { + position: absolute; + } + + #newsubmit { + width: 100%; + } + + .toggleUserActions { + position: relative; + display: block; align-items: center; - z-index: 0; - /* let's define the column until storage path, - what follows will be manually defined */ - grid-template-columns: 44px minmax($grid-col-min-width + 30px, 1fr) repeat(auto-fit, minmax($grid-col-min-width, 1fr)); - border-bottom: var(--color-border) 1px solid; - &.disabled { - opacity: .5; - } - /* grid col width */ - .name, - .password, - .mailAddress, - .languages, - .storageLocation, - .userBackend, - .lastLogin { - min-width: $grid-col-min-width; - display: flex; - color: var(--color-text-dark); - vertical-align: baseline; - } - .groups, - .subadmins, - .quota { - .multiselect { - min-width: $grid-col-min-width; - color: var(--color-text-dark); - vertical-align: baseline; - } - } - .obfuscated { - width: 400px; + .icon-more { + width: 44px; + height: 44px; + opacity: .5; + cursor: pointer; + margin-left: 40px; + + &:hover { opacity: .7; - } - .userActions { - min-width: 44px; - position: sticky; - right: 20px; - z-index: 109; - } - .subtitle { - color: var(--color-text-maxcontrast); - vertical-align: baseline; - } - - /* various */ - &#grid-header, - &#new-user { - @include position('sticky'); - align-self: normal; - background-color: var(--color-main-background); - z-index: 100; /* above multiselect */ - top: $header-height; - &.sticky { - box-shadow: 0 -2px 10px 1px var(--color-box-shadow); - } - /* fake input for groups validation */ - input#newgroups { - position: absolute; - opacity: 0; - width: 80% !important; - margin: 0 10%; - z-index: 0; - } - } - // separate prop to set initial value to top: 50px - &#new-user { - height: 120px; - .row { - padding-top: 50px; } } - &#grid-header { - color: var(--color-text-maxcontrast); - z-index: 60; /* above new-user */ - border-bottom-width: thin; + } - #headerDisplayName, - #headerPassword, - #headerAddress, - #headerGroups, - #headerSubAdmins, - #theHeaderUserBackend, - #theHeaderLastLogin, - #headerQuota, - #theHeaderStorageLocation, - #headerLanguages { - /* Line up header text with column content for when there’s inputs */ - padding-left: 7px; - text-transform: none; - color: var(--color-text-maxcontrast); - vertical-align: baseline; - } - } - &:hover { - input:not([type='submit']):not(:focus):not(:active) { - border-color: var(--color-border) !important; - } - &:not(#grid-header) { - box-shadow: 5px 0 0 var(--color-primary-element) inset; - } - } - > div, - > form { - grid-row: 1; - display: inline-flex; - color: var(--color-text-lighter); - position: relative; - > input:not(:focus):not(:active) { - border-color: transparent; - cursor: pointer; - } - > input:focus, >input:active { - + .icon-confirm { - display: block !important; - } - } - /* inputs like mail, username, password */ - &:not(.userActions) > input:not([type='submit']) { - width: 100%; - min-width: 0; - } - &.name { - word-break: break-all; - } - &.displayName, - &.mailAddress { - > input { - text-overflow: ellipsis; - } - } - &.name, - &.userBackend { - /* better multi-line visual */ - line-height: 1.3em; - max-height: 100%; - overflow : hidden; - /* not supported by all browsers - so we keep the overflow hidden - as a fallback */ - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - } - &.quota { - height: 44px; - display: flex; - align-items: center; - justify-content: center; - progress { - width: 100%; - margin: 0 10px; - height: 3px; - } - } - .icon-confirm { - flex: 0 0 auto; - cursor: pointer; - &:not(:active) { - display: none; - } - } - &.avatar { - height: 32px; - width: 32px; - margin: 6px; - img { - display: block; - } - } - &.userActions { - .action-item { - position: absolute; - } - #newsubmit { - width: 100%; - } - .toggleUserActions { - position: relative; - display: block; - align-items: center; - .icon-more { - width: 44px; - height: 44px; - opacity: .5; - cursor: pointer; - margin-left: 40px; - &:hover { - opacity: .7; - } - } - } - .feedback { - display: flex; - align-items: center; - white-space: nowrap; - transition: opacity 200ms ease-in-out; - .icon-checkmark { - opacity: .5; - margin-right: 5px; - } - } - } - /* Fill the grid cell */ - .multiselect.multiselect-vue { - width: 100%; - } - } - } - .infinite-loading-container { + .feedback { display: flex; align-items: center; - justify-content: center; - grid-row-start: span 4; + white-space: nowrap; + transition: opacity 200ms ease-in-out; + + .icon-checkmark { + opacity: .5; + margin-right: 5px; + } + } } - .users-list-end { - opacity: .5; - user-select: none; + + /* Fill the grid cell */ + .multiselect.multiselect-vue { + width: 100%; } + } } + + .infinite-loading-container { + display: flex; + align-items: center; + justify-content: center; + grid-row-start: span 4; + } + + .users-list-end { + opacity: .5; + user-select: none; + } + } } diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue index 1dd6521ac2..2cb4dc67c8 100644 --- a/apps/settings/src/components/UserList.vue +++ b/apps/settings/src/components/UserList.vue @@ -437,7 +437,7 @@ export default { */ validateQuota(quota) { // only used for new presets sent through @Tag - let validQuota = OC.Util.computerFileSize(quota) + const validQuota = OC.Util.computerFileSize(quota) if (validQuota !== null && validQuota >= 0) { // unify format output quota = OC.Util.humanFileSize(OC.Util.computerFileSize(quota)) @@ -525,7 +525,7 @@ export default { setNewUserDefaultGroup(value) { if (value && value.length > 0) { // setting new user default group to the current selected one - let currentGroup = this.groups.find(group => group.id === value) + const currentGroup = this.groups.find(group => group.id === value) if (currentGroup) { this.newUser.groups = [currentGroup] return