theming: move reset button into field and only show when focused

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2016-11-16 11:38:01 +01:00
parent 571c5aac5e
commit e595c50042
2 changed files with 53 additions and 30 deletions

View File

@ -6,12 +6,30 @@
display: none;
}
#theming div > label {
position: relative;
}
#theming .theme-undo {
position: absolute;
top: -7px;
right: 7px;
cursor: pointer;
opacity: .5;
padding: 11px 5px;
opacity: .3;
padding: 7px;
vertical-align: top;
display: inline-block;
visibility: hidden;
}
#theming form .theme-undo {
position: relative;
top: 4px;
left: 158px;
visibility: visible;
}
#theming input[type='text']:focus + .theme-undo,
#theming input[type='text']:active + .theme-undo {
visibility: visible;
}
#theming .icon-loading-small:after {
@ -48,4 +66,4 @@ div#theming_settings_msg {
max-width: 20%;
max-height: 20%;
margin-top: 20px;
}
}

View File

@ -34,50 +34,55 @@ style('theming', 'settings-admin');
<?php p($_['errorMessage']) ?>
</p>
<?php } else { ?>
<p>
<label><span><?php p($l->t('Name')) ?></span>
<div>
<label>
<span><?php p($l->t('Name')) ?></span>
<input id="theming-name" type="text" placeholder="<?php p($l->t('Name')); ?>" value="<?php p($_['name']) ?>" maxlength="250" />
<div data-setting="name" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></div>
</label>
<span data-setting="name" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
</p>
<p>
<label><span><?php p($l->t('Web address')) ?></span>
</div>
<div>
<label>
<span><?php p($l->t('Web address')) ?></span>
<input id="theming-url" type="text" placeholder="<?php p($l->t('Web address https://…')); ?>" value="<?php p($_['url']) ?>" maxlength="500" />
<div data-setting="url" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></div>
</label>
<span data-setting="url" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
</p>
<p>
<label><span><?php p($l->t('Slogan')) ?></span>
</div>
<div>
<label>
<span><?php p($l->t('Slogan')) ?></span>
<input id="theming-slogan" type="text" placeholder="<?php p($l->t('Slogan')); ?>" value="<?php p($_['slogan']) ?>" maxlength="500" />
<div data-setting="slogan" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></div>
</label>
<span data-setting="slogan" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
</p>
<p>
<label><span><?php p($l->t('Color')) ?></span>
</div>
<div>
<label>
<span><?php p($l->t('Color')) ?></span>
<input id="theming-color" type="text" class="jscolor" maxlength="6" value="<?php p($_['color']) ?>" />
<div data-setting="color" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></div>
</label>
<span data-setting="color" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
</p>
<p>
<form class="uploadButton" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
</div>
<div>
<form class="uploadButton inlineblock" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
<input type="hidden" id="current-logoMime" name="current-logoMime" value="<?php p($_['logoMime']); ?>" />
<label for="uploadlogo"><span><?php p($l->t('Logo')) ?></span></label>
<input id="uploadlogo" class="upload-logo-field" name="uploadlogo" type="file" />
<label for="uploadlogo" class="button icon-upload svg" id="uploadlogo" title="<?php p($l->t('Upload new logo')) ?>"></label>
<span data-setting="logoMime" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
<div data-setting="logoMime" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></div>
</form>
</p>
<p>
<form class="uploadButton" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
</div>
<div>
<form class="uploadButton inlineblock" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
<input type="hidden" id="current-backgroundMime" name="current-backgroundMime" value="<?php p($_['backgroundMime']); ?>" />
<label for="upload-login-background"><span><?php p($l->t('Log in image')) ?></span></label>
<input id="upload-login-background" class="upload-logo-field" name="upload-login-background" type="file">
<label for="upload-login-background" class="button icon-upload svg" id="upload-login-background" title="<?php p($l->t("Upload new login background")) ?>"></label>
<span data-setting="backgroundMime" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
<div data-setting="backgroundMime" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></div>
</form>
</p>
<div id="theming-preview" style="background-color:<?php p($_['color']);?>; background-image:url(<?php p($_['background']); ?>);">
<img src="<?php p($_['logo']); ?>" id="theming-preview-logo" />
</div>
</div>
<div id="theming-preview" style="background-color:<?php p($_['color']);?>; background-image:url(<?php p($_['background']); ?>);">
<img src="<?php p($_['logo']); ?>" id="theming-preview-logo" />
</div>
<?php } ?>
</div>