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

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

1 files changed, 32 insertions, 27 deletions

diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php
index b6c97040230..013b3bcf34f 100644
--- 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>