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

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css
index 5d2b08f5e434aa3147898ca65ca4ab5db84180a6..60b9c080ad6885c3e25639e9555f7bdc0d20eaea 100644 (file)
--- a/apps/theming/css/settings-admin.css
+++ b/apps/theming/css/settings-admin.css
@@ -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;
-}
\ No newline at end of file
+}

diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php
index b6c970402308fb7ca6d90fd9e0f9107add6099e0..013b3bcf34f1fa94f34b6224adaf74c9722d36aa 100644 (file)
--- a/apps/theming/templates/settings-admin.php
+++ b/apps/theming/templates/settings-admin.php
@@ -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>