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

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

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;
-}
+}

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>