Merge pull request #9332 from nextcloud/personal-settings-fixes
Small improvements for personal settings
This commit is contained in:
commit
ceb674632c
|
@ -105,9 +105,6 @@
|
||||||
.nav-icon-trashbin {
|
.nav-icon-trashbin {
|
||||||
background-image: url('../img/delete.svg?v=1');
|
background-image: url('../img/delete.svg?v=1');
|
||||||
}
|
}
|
||||||
.nav-icon-quota {
|
|
||||||
background-image: url('../img/quota.svg?v=1');
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-navigation .nav-files a.nav-icon-files {
|
#app-navigation .nav-files a.nav-icon-files {
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
|
if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
|
||||||
?>has-tooltip" title="<?php p($_['usage_relative'] . '%');
|
?>has-tooltip" title="<?php p($_['usage_relative'] . '%');
|
||||||
} ?>">
|
} ?>">
|
||||||
<a href="#" class="nav-icon-quota svg">
|
<a href="#" class="icon-quota svg">
|
||||||
<p id="quotatext"><?php
|
<p id="quotatext"><?php
|
||||||
if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
|
if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
|
||||||
p($l->t('%s of %s used', [$_['usage'], $_['total_space']]));
|
p($l->t('%s of %s used', [$_['usage'], $_['total_space']]));
|
||||||
|
|
|
@ -300,6 +300,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
|
||||||
background-image: url('../img/actions/public.svg?v=1');
|
background-image: url('../img/actions/public.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-quota {
|
||||||
|
background-image: url('../img/actions/quota.svg?v=1');
|
||||||
|
}
|
||||||
|
|
||||||
.icon-rename {
|
.icon-rename {
|
||||||
background-image: url('../img/actions/rename.svg?v=1');
|
background-image: url('../img/actions/rename.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
|
@ -927,40 +927,6 @@ code {
|
||||||
font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace;
|
font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
#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 {
|
|
||||||
font-weight: normal;
|
|
||||||
white-space: nowrap;
|
|
||||||
position: absolute;;
|
|
||||||
top: 0;
|
|
||||||
&.quotatext-bg {
|
|
||||||
mix-blend-mode: luminosity;
|
|
||||||
}
|
|
||||||
&.quotatext-fg {
|
|
||||||
color: $color-primary-text;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 50;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.quotatext {
|
|
||||||
padding: .6em 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pager {
|
.pager {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
float: right;
|
float: right;
|
||||||
|
|
Before Width: | Height: | Size: 261 B After Width: | Height: | Size: 261 B |
|
@ -52,9 +52,6 @@ input {
|
||||||
|
|
||||||
#displayavatar {
|
#displayavatar {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
p {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#uploadavatarbutton, #selectavatar, #removeavatar {
|
#uploadavatarbutton, #selectavatar, #removeavatar {
|
||||||
|
@ -119,6 +116,7 @@ input {
|
||||||
background-size: 16px;
|
background-size: 16px;
|
||||||
background-position: left 8px;
|
background-position: left 8px;
|
||||||
opacity: .3;
|
opacity: .3;
|
||||||
|
margin-top: -2px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
@ -162,6 +160,16 @@ input {
|
||||||
.section {
|
.section {
|
||||||
padding: 10px 10px;
|
padding: 10px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.personal-info {
|
||||||
|
margin-right: 10%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.personal-info[class^='icon-'], .personal-info[class*=' icon-'] {
|
||||||
|
background-position: 0px 2px;
|
||||||
|
padding-left: 30px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -234,7 +242,7 @@ input {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
justify-content: space-between;
|
justify-content: flex-start;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
> label {
|
> label {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -272,6 +280,26 @@ input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
font-weight: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* verify accounts */
|
/* verify accounts */
|
||||||
/* only show pointer cursor when popup will be there */
|
/* only show pointer cursor when popup will be there */
|
||||||
.verification-dialog {
|
.verification-dialog {
|
||||||
|
|
|
@ -37,34 +37,6 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div id="quota" class="section">
|
|
||||||
<progress value="<?php p($_['usage_relative']); ?>" max="100"
|
|
||||||
<?php if($_['usage_relative'] > 80): ?> class="warn" <?php endif; ?>></progress>
|
|
||||||
|
|
||||||
<div style="width:<?php p($_['usage_relative']);?>%" class="quotatext-fg">
|
|
||||||
<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']]));?>
|
|
||||||
<?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>
|
|
||||||
|
|
||||||
<div id="personal-settings">
|
<div id="personal-settings">
|
||||||
<div id="personal-settings-avatar-container" class="personal-settings-container">
|
<div id="personal-settings-avatar-container" class="personal-settings-container">
|
||||||
<div>
|
<div>
|
||||||
|
@ -100,14 +72,28 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="personal-settings-setting-box personal-settings-group-box">
|
<div class="personal-settings-setting-box personal-settings-group-box section">
|
||||||
<div id="groups" class="section">
|
<h2><?php p($l->t('Details')); ?></h2>
|
||||||
<h2><?php p($l->t('Groups')); ?></h2>
|
<div id="groups" class="personal-info icon-user">
|
||||||
<p><?php p($l->t('You are member of the following groups:')); ?></p>
|
<p class="icon-groups"><?php p($l->t('You are member of the following groups:')); ?></p>
|
||||||
<p id="groups-groups">
|
<p id="groups-groups">
|
||||||
<strong><?php p(implode(', ', $_['groups'])); ?></strong>
|
<strong><?php p(implode(', ', $_['groups'])); ?></strong>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="quota" class="personal-info icon-quota">
|
||||||
|
<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>',
|
||||||
|
[$_['usage']]));?>
|
||||||
|
<?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>
|
||||||
|
<progress value="<?php p($_['usage_relative']); ?>" max="100"<?php if($_['usage_relative'] > 80): ?> class="warn" <?php endif; ?>></progress>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue