From 845fe15ebcb2054310cbdc38e5cfa2d896f40ddb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 28 Jun 2018 13:15:35 +0200
Subject: [PATCH] Adjust collaborative tags and automated tagging settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 apps/systemtags/css/settings.css        | 17 ++++++++++++++
 apps/systemtags/js/admin.js             |  8 +++++--
 apps/systemtags/templates/admin.php     | 31 ++++++++++++-------------
 apps/workflowengine/css/admin.css       | 19 ++++++++++++++-
 apps/workflowengine/templates/admin.php | 16 +++++++------
 5 files changed, 65 insertions(+), 26 deletions(-)
 create mode 100644 apps/systemtags/css/settings.css

diff --git a/apps/systemtags/css/settings.css b/apps/systemtags/css/settings.css
new file mode 100644
index 0000000000000..5313247227c2f
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/apps/systemtags/js/admin.js b/apps/systemtags/js/admin.js
index 1388d5b2d7cf8..280616ea432e1 100644
--- a/apps/systemtags/js/admin.js
+++ b/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');
 			}
 		},
 
diff --git a/apps/systemtags/templates/admin.php b/apps/systemtags/templates/admin.php
index e964f610ca12c..3d0b915c52cbf 100644
--- a/apps/systemtags/templates/admin.php
+++ b/apps/systemtags/templates/admin.php
@@ -27,32 +27,31 @@
 ]);
 
 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>
+		<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>
 
-	<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>
diff --git a/apps/workflowengine/css/admin.css b/apps/workflowengine/css/admin.css
index 5494b35ce6926..0c34ffc809756 100644
--- a/apps/workflowengine/css/admin.css
+++ b/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,
diff --git a/apps/workflowengine/templates/admin.php b/apps/workflowengine/templates/admin.php
index e9873f8f28935..26d581aee03cd 100644
--- a/apps/workflowengine/templates/admin.php
+++ b/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}}">
-			{{! delete only makes sense if the operation is already saved }}
-			{{#if operation.id}}
-			<span class="button-delete pull-right icon-delete"></span>
-			{{/if}}
-			<input type="text" class="pull-right operation-operation" value="{{operation.operation}}">
+			<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 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>