Adjust collaborative tags and automated tagging settings

Signed-off-by: Julius Härtl <jus@bitgrid.net>

apps/systemtags/css/settings.css

@@ -0,0 +1,17 @@
+.systemtag-input {
+	display: flex;
+	max-width: 500px;
+}
+#systemtags .select2-container {
+	width: 100%;
+	max-width: 500px;
+}
+#systemtag_name {
+	flex-grow: 1;
+}
+
+#systemtag_delete,
+#systemtag_reset,
+#systemtag_submit {
+	padding: 8px;
+}

apps/systemtags/js/admin.js

@@ -116,12 +116,16 @@
 			if (tagId > 0) {
 				$('#systemtags').attr('data-systemtag-id', tagId);
 				$('#systemtag_delete').removeClass('hidden');
-				$('#systemtag_submit').val(t('systemtags_manager', 'Update'));
+				$('#systemtag_submit span').text(t('systemtags_manager', 'Update'));
+				$('#systemtag_reset').removeClass('hidden');
+				$('#systemtag_create').addClass('hidden');
 			} else {
 				$('#systemtag').select2('val', '');
 				$('#systemtags').attr('data-systemtag-id', '');
 				$('#systemtag_delete').addClass('hidden');
-				$('#systemtag_submit').val(t('systemtags_manager', 'Create'));
+				$('#systemtag_reset').addClass('hidden');
+				$('#systemtag_submit span').text(t('systemtags_manager', 'Create'));
+				$('#systemtag_create').removeClass('hidden');
 			}
 		},
 

apps/systemtags/templates/admin.php

@@ -27,32 +27,31 @@ script('core', [
 ]);
 
 script('systemtags', 'admin');
+style('systemtags', 'settings');
 
 /** @var \OCP\IL10N $l */
 ?>
 
 <form id="systemtags" class="section" data-systemtag-id="">
 	<h2><?php p($l->t('Collaborative tags')); ?></h2>
-	<p class="settings-hint"><?php p($l->t('Create and edit collaborative tags. These tags affect all users.')); ?></p>
+	<p class="settings-hint"><?php p($l->t('Collaborative tags are available for all users. Restricted tags are visible to users but cannot be assigned by them. Invisible tags are for internal use, since users cannot see or assign them.')); ?></p>
 
-	<input type="hidden" name="systemtag" id="systemtag" placeholder="<?php p($l->t('Select tag …')); ?>" style="width: 400px;" />
+	<input type="hidden" name="systemtag" id="systemtag" placeholder="<?php p($l->t('Select tag …')); ?>" />
 
-	<br><br>
+	<h3 id="systemtag_create"><?php p($l->t('Create a new tag')); ?></h3>
 
-	<input type="text" id="systemtag_name" name="systemtag_name" placeholder="<?php p($l->t('Name')); ?>" style="width: 200px;">
+	<div class="systemtag-input">
+		<input type="text" id="systemtag_name" name="systemtag_name" placeholder="<?php p($l->t('Name')); ?>">
 
-	<span id="systemtag_delete" class="hidden">
+		<select id="systemtag_level">
-		<img src="<?php p(\OCP\Template::image_path('core', 'actions/delete.svg')); ?>" alt="<?php p($l->t('Delete')); ?>">
+			<option value="3"><?php p($l->t('Public')); ?></option>
-	</span>
+			<option value="2"><?php p($l->t('Restricted')); ?></option>
+			<option value="0"><?php p($l->t('Invisible')); ?></option>
+		</select>
 
-	<br>
+		<a id="systemtag_delete" class="hidden icon-delete"><span class="hidden-visually"><?php p($l->t('Delete')); ?></span></a>
+		<a id="systemtag_reset" class="hidden icon-close"><span class="hidden-visually"><?php p($l->t('Reset')); ?></span></a>
+		<a id="systemtag_submit" class="icon-confirm"><span class="hidden-visually"><?php p($l->t('Create')); ?></span></a>
+	</div>
 
-	<select id="systemtag_level">
-		<option value="3"><?php p($l->t('Public')); ?></option>
-		<option value="2"><?php p($l->t('Restricted')); ?></option>
-		<option value="0"><?php p($l->t('Invisible')); ?></option>
-	</select>
-
-	<input type="button" id="systemtag_submit" value="<?php p($l->t('Create')); ?>">
-	<input type="button" id="systemtag_reset" value="<?php p($l->t('Reset')); ?>">
 </form>

apps/workflowengine/css/admin.css

@@ -11,6 +11,10 @@
 .workflowengine .operation button {
 	margin-bottom: 0;
 }
+.workflowengine .operation-name {
+	width: 100%;
+	max-width: 500px;
+}
 .workflowengine .operation span.info {
 	padding: 7px;
 	color: #eee;
@@ -34,10 +38,23 @@
 	background-color: #f8f8f8;
 }
 
+.workflowengine .operation-header .operation-name {
+	align-self: flex-start;
+	padding: 10px;
+}
+.workflowengine .operation-header {
+	display: flex;
+}
+.workflowengine .operation-header .select2-container {
+	align-self: flex-end;
+}
+.workflowengine .operation-header .icon-delete {
+	margin-left: auto;
+}
 .workflowengine .operation .button-delete,
 .workflowengine .operation .button-delete-check {
 	opacity: 0.5;
-	padding: 7px;
+	padding: 11px;
 }
 .workflowengine .operation .button-delete:hover,
 .workflowengine .operation .button-delete:focus,

apps/workflowengine/templates/admin.php

@@ -46,12 +46,14 @@
 
 	<script type="text/template" id="operation-template">
 		<div class="operation{{#if hasChanged}} modified{{/if}}">
-			<input type="text" class="operation-name" placeholder="<?php p($l->t('Short rule description')); ?>" value="{{operation.name}}">
+			<div class="operation-header">
-			{{! delete only makes sense if the operation is already saved }}
+				<input type="text" class="operation-name" placeholder="<?php p($l->t('Short rule description')); ?>" value="{{operation.name}}" />
-			{{#if operation.id}}
+				<input type="text" class="operation-operation" value="{{operation.operation}}" />
-			<span class="button-delete pull-right icon-delete"></span>
+				{{! delete only makes sense if the operation is already saved }}
-			{{/if}}
+				{{#if operation.id}}
-			<input type="text" class="pull-right operation-operation" value="{{operation.operation}}">
+				<span class="button-delete icon-delete"></span>
+				{{/if}}
+			</div>
 
 			<div class="checks">
 				{{#each operation.checks}}
@@ -67,7 +69,7 @@
 						{{/each}}
 					</select>
 					<input type="text" class="check-value" value="{{value}}">
-					<span class="button-delete-check pull-right icon-delete"></span>
+					<span class="button-delete-check icon-delete"></span>
 				</div>
 				{{/each}}
 			</div>