From 64c3606e0978588b63ae504356ac3343302facc6 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Fri, 23 Jun 2017 00:19:55 +0200
Subject: [PATCH] polish label editor

Signed-off-by: Artem Anufrij <artem.anufrij@live.de>
---
 css/style.css                        | 65 +++++++++++++++-------------
 templates/part.board.sidebarView.php | 44 ++++++++++---------
 2 files changed, 57 insertions(+), 52 deletions(-)

diff --git a/css/style.css b/css/style.css
index 43d45c956..eb7ef473c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -38,10 +38,7 @@ input.input-inline {
 	padding: 0;
 	border: none;
 	width: 100%;
-	border-bottom: 1px solid #333333;
 	-webkit-border-radius: 0;
-	line-height: 100%;
-	margin: -4px 0;
 }
 
 button.button-inline {
@@ -531,7 +528,7 @@ button.button-inline:hover {
 	background-color: #f0f0f0;
 }
 
-#app-sidebar .icon-close {
+#sidebar-header .icon-close, #card-header .icon-close {
 	position: absolute;
 	top: 5px;
 	right: 5px;
@@ -647,15 +644,13 @@ button.button-inline:hover {
 }
 
 .labels li {
-	padding: 1px;
+	padding: 0px 0px 5px 0px;
 	-webkit-border-radius: 3px;
 	margin: 1px;
-	float: left;
 	color: #ffffff;
-	font-size: 80%;
-	font-weight: 900;
 	min-width: 20px;
-	display: inline-block;
+	display: flex;
+	align-content: center;
 	text-align: center;
 }
 
@@ -682,9 +677,8 @@ button.button-inline:hover {
 	overflow: hidden;
 	border-radius:3px;
 	flex-direction: row;
-	min-width: 240px;
-	height: 34px;
 	display: flex;
+	margin: 0px 0px 0px 3px;
 }
 
 .colorselect .color {
@@ -716,6 +710,16 @@ button.button-inline:hover {
 	height: 26px;
 }
 
+.labels .label-edit {
+	display: flex;
+	width: 100%;
+}
+
+.labels .label-edit input {
+	border-bottom: 1px solid #333333;
+	padding: 5px 5px 4px 5px !important;
+}
+
 /**
  * Board list main screen area
  */
@@ -865,45 +869,44 @@ button.button-inline:hover {
 	padding: 10px;
 }
 
-#board-detail-labels ul li {
-	display: block;
-	font-size: 10pt;
-	float: none;
-	margin-bottom: 1px;
-	overflow: hidden;
-}
-
 #board-detail-labels ul li input {
-	float: left;
-	font-size: 10pt;
+	margin: 0px;
 	padding: 5px;
+	min-height: 0px;
 }
 
 #board-detail-labels ul li .label-title {
-	float: left;
-	width: 88%;
-	font-size: 10pt;
-	padding: 5px;
+	width: 100%;
+	padding: 4px;
 	border: none;
-	margin-right: 2px;
+	border-radius: 0px 0px 3px 3px;
 }
 
 #board-detail-labels ul li a.icon {
-	float: right;
 	padding: 5px;
+	opacity: 0.3;
+}
+
+#board-detail-labels ul li a.icon:hover {
+	opacity: 0.7;
 }
 
 .label-create {
-	width: 88%;
+	width: 100%;
+	padding: 0px 56px 0px 0px !important;
+	justify-content: center;
 }
 
-.label-create .icon {
-	margin-bottom: -3px;
+
+
+.label-create a {
+	display: block;
+	margin: 0px;
 }
 
 #board-detail-labels .color {
 	width: 28px;
-	height: 31px;
+	height: 100%;
 }
 
 .tabHeaders {
diff --git a/templates/part.board.sidebarView.php b/templates/part.board.sidebarView.php
index dbcb81767..37c2862a1 100644
--- a/templates/part.board.sidebarView.php
+++ b/templates/part.board.sidebarView.php
@@ -69,37 +69,39 @@
 
             <ul class="labels">
                 <li ng-repeat="label in boardservice.getCurrent().labels">
-                <span class="label-title" style="background-color:#{{label.color}}; color:{{ label.color|textColorFilter }};" ng-if="!label.edit">
-                    <span ng-if="label.title">{{ label.title }}</span><i ng-if="!label.title"><br /></i>
-                </span>
-                <span class="label-title" style="background-color:#{{label.color}}; color:{{ textColor(label.color) }}; width:178px;" ng-if="label.edit">
-                    <form ng-submit="labelUpdate(label)">
-                      <input type="text" ng-model="label.title" class="input-inline" style="background-color:#{{label.color}}; color:{{ label.color|textColorFilter }};" autofocus-on-insert maxlength="100"/>
-                    </form>
-                </span>
-                    <div class="colorselect" ng-if="label.edit">
-                        <div class="color" ng-repeat="c in defaultColors" style="background-color:#{{ c }};" ng-click="label.color=c" ng-class="{'selected': (c == label.color) }"><br /></div>
+                    <span class="label-title" style="background-color:#{{label.color}}; color:{{ label.color|textColorFilter }};" ng-if="!label.edit">
+                        <span ng-if="label.title">{{ label.title }}</span><i ng-if="!label.title"><br /></i>
+                    </span>
+                    <div class="label-edit" ng-if="label.edit">
+                        <div style="background-color:#{{label.color}}; color:{{ textColor(label.color) }}; width: 100%">
+                            <form ng-submit="labelUpdate(label)">
+                                <input type="text" ng-model="label.title" class="input-inline" style="background-color:#{{label.color}}; color:{{ label.color|textColorFilter }};" autofocus-on-insert maxlength="100"/>
+                            </form>
+                        </div>
+                        <div class="colorselect">
+                            <div class="color" ng-repeat="c in defaultColors" style="background-color:#{{ c }};" ng-click="label.color=c" ng-class="{'selected': (c == label.color) }"><br /></div>
+                        </div>
                     </div>
-                    <a ng-if="boardservice.canManage()" ng-click="labelDelete(label)" class="icon"><i class="icon icon-delete" ></i></a>
                     <a ng-if="boardservice.canManage() && label.edit" ng-click="labelUpdate(label)" class="icon"><i class="icon icon-checkmark" ></i></a>
                     <a ng-if="boardservice.canManage() && !label.edit" ng-click="label.edit=true" class="icon"><i class="icon icon-rename" ></i></a>
-
+                    <a ng-if="boardservice.canManage()" ng-click="labelDelete(label)" class="icon"><i class="icon icon-delete" ></i></a>
                 </li>
                 <li ng-if="status.createLabel">
-                    <form ng-submit="labelCreate(newLabel)">
-                <span class="label-title" style="background-color:#{{newLabel.color}}; color:{{ textColor(newLabel.color) }}; width:178px;">
-                    <input type="text" class="input-inline" ng-model="newLabel.title" style="color:{{ newLabel.color|textColorFilter }};" autofocus-on-insert maxlength="100" />
-                </span>
+                    <div class="label-edit">
+                        <div style="background-color:#{{newLabel.color}}; color:{{ textColor(newLabel.color) }}; width:100%;">
+                            <form ng-submit="labelCreate(newLabel)">
+                                <input type="text" class="input-inline" ng-model="newLabel.title" style="color:{{ newLabel.color|textColorFilter }};" autofocus-on-insert maxlength="100" />
+                            </form>
+                        </div>
                         <div class="colorselect">
                             <div class="color" ng-repeat="c in defaultColors" style="background-color:#{{ c }};" ng-click="newLabel.color=c" ng-class="{'selected': (c == newLabel.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
                         </div>
-                        <a ng-click="labelCreate(newLabel)" class="icon"><i class="icon icon-checkmark" ></i></a>
-                        <a ng-click="status.createLabel=false" class="icon icon-close"></a>
-
-                    </form>
+                    </div>
+                    <a ng-click="labelCreate(newLabel)" class="icon"><i class="icon icon-checkmark" ></i></a>
+                    <a ng-click="status.createLabel=false" class="icon"><i class="icon icon-close" ></i></a>
                 </li>
                 <li ng-if="boardservice.canManage() && !status.createLabel" class="label-create">
-                    <a ng-click="status.createLabel=true"><span class="icon icon-add"> </span> <?php p($l->t('Create a new tag')); ?></a>
+                    <a ng-click="status.createLabel=true" class="button"><span class="icon icon-add"></span><br /><span><?php p($l->t('Create a new tag')); ?></span></a>
                 </li>
             </ul>