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,25 +27,21 @@ 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">
-		<img src="<?php p(\OCP\Template::image_path('core', 'actions/delete.svg')); ?>" alt="<?php p($l->t('Delete')); ?>">
-	</span>
-
-	<br>
 
 		<select id="systemtag_level">
 			<option value="3"><?php p($l->t('Public')); ?></option>
@@ -53,6 +49,9 @@ script('systemtags', 'admin');
 			<option value="0"><?php p($l->t('Invisible')); ?></option>
 		</select>
 
-	<input type="button" id="systemtag_submit" value="<?php p($l->t('Create')); ?>">
+		<a id="systemtag_delete" class="hidden icon-delete"><span class="hidden-visually"><?php p($l->t('Delete')); ?></span></a>
-	<input type="button" id="systemtag_reset" value="<?php p($l->t('Reset')); ?>">
+		<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>
+
 </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">
+				<input type="text" class="operation-name" placeholder="<?php p($l->t('Short rule description')); ?>" value="{{operation.name}}" />
+				<input type="text" class="operation-operation" value="{{operation.operation}}" />
 				{{! delete only makes sense if the operation is already saved }}
 				{{#if operation.id}}
-			<span class="button-delete pull-right icon-delete"></span>
+				<span class="button-delete icon-delete"></span>
 				{{/if}}
-			<input type="text" class="pull-right operation-operation" value="{{operation.operation}}">
+			</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>