Commit @a54651dfd709b01df1dcc4b134e9627ca949933f

doortts 2014-05-20

issue-label: suble ui change for more flat

  - reduce border line
  - reduce rounded square box
  - change mouse hover style for issue label search

@a54651dfd709b01df1dcc4b134e9627ca949933f

9fb8658

a54651d

app/assets/stylesheets/less/_override.less

--- app/assets/stylesheets/less/_override.less

+++ app/assets/stylesheets/less/_override.less

...	...	@@ -280,3 +280,7 @@
280	280	margin-top: 0;
281	281	padding-top: 0;
282	282	}
	283	+
	284	+.label {
	285	+ border-radius: 1px;
	286	+}

9fb8658

a54651d

app/assets/stylesheets/less/_page.less

--- app/assets/stylesheets/less/_page.less

+++ app/assets/stylesheets/less/_page.less


     width: 1170px;
     margin:20px auto 0;
 
-    label {
-        display: inline-block;
-    }
-
     h4 {
         padding:10px 0;
         line-height: 30px;

 .issue-form-labels {
     .controls {
         margin:0;
-        line-height:30px;
 
         .labelInput {
             width:90%;

9fb8658

a54651d

app/assets/stylesheets/less/_yobiUI.less

--- app/assets/stylesheets/less/_yobiUI.less

+++ app/assets/stylesheets/less/_yobiUI.less


     &.large  { padding: 9px 30px; font-size:15px; }
 }
 button.nbtn {
+    &.square {
+      padding: 1px 12px;
+      height: 24px;
+      line-height: 1;
+      margin-top: 4px;
+      margin-right: 4px;
+    }
     &.small  { padding:1px 10px; height:24px; line-height:1; }
     &.medium { padding:4px 20px; height:30px; line-height:1; }
     &.large  { padding:8px 30px; height:36px; line-height:1; font-size:15px; }

 
 /** issue label **/
 .issue-label {
-    background:#f7f7f7;
-    border:1px solid rgba(0,0,0,0.1);/*none;*/
-    padding:2px 6px 2px 7px; margin-right:5px;
-    font-size:11px; font-weight:bold;
+    background:#f9f9f9;
+    font-size:11px;
     text-shadow:none;
     -webkit-transition-duration:0.25s;
     cursor: pointer;

     /*&.editable .delete { display:inline; }*/
 
     &.list-label {
-        padding:0 2px;
+        padding:2px 3px;
         font-weight:normal;
     }
 
     &.active {
-        .border-radius(2px);
+        .border-radius(1px);
         &.active-white   { color:#fff; }
         &.active-dimgray { color:#696969; }
     }

 }
 span.issue-label {
     display: inline-block;
-    overflow: hidden; vertical-align: middle;
+    overflow: hidden;
     line-height: 20px;
+    margin-right: 5px;
+    padding: 2px 6px;
+    &:hover {
+      background: #DFDFDF;
+      .opacity(100);
+    }
 }
 
 .dropdown-menu .issue-label:hover { .opacity(100); }

         right:5px;
     }
 }
+
+.control-label{
+    font-weight: bold;
+    display: block;
+    padding: 4px 4px 0px 4px;
+    color: 666;
+}

9fb8658

a54651d

public/javascripts/common/yobi.Label.js

--- public/javascripts/common/yobi.Label.js

+++ public/javascripts/common/yobi.Label.js


         var sActiveCSSTarget = '.issue-label.active[data-labelId="' + oLabel.id + '"]';
 
         var aDefaultCss = [];
-        var sDefaultCssSkel = 'box-shadow: inset 3px 0 0px ' + oLabel.color;
+        var sDefaultCssSkel = 'box-shadow: inset 2px 0 0px ' + oLabel.color;
         ["", "-moz-", "-webkit"].forEach(function(sPrefix){
             aDefaultCss.push(sPrefix + sDefaultCssSkel);
         });

9fb8658

a54651d

public/javascripts/common/yobi.LabelEditor.js

--- public/javascripts/common/yobi.LabelEditor.js

+++ public/javascripts/common/yobi.LabelEditor.js


 
         htVar.aColors = htOptions.aColors || ['#da5454','#f86ca0','#ff9e9d','#ffcc33','#f8c86c','#ff9933','#99ca3c','#3fb8af','#22b4b9','#6ca6f8','#4d68b1','#9966cc'];
         htVar.sTplEditor = htOptions.sTplEditor || $("#tplYobiLabelEditor").text();
-        htVar.sTplBtnColor = htOptions.sTplBtnColor || '<button type="button" class="issue-label issueColor nbtn small" style="background-color:${color}">';
+        htVar.sTplBtnColor = htOptions.sTplBtnColor || '<button type="button" class="issue-label issueColor nbtn square" style="background-color:${color}">';
     }
 
     /**

Add a comment

Open 0
Closed 0

List

...	...	@@ -459,10 +459,6 @@
459	459	width: 1170px;
460	460	margin:20px auto 0;
461	461
462		- label {
463		- display: inline-block;
464		- }
465		-
466	462	h4 {
467	463	padding:10px 0;
468	464	line-height: 30px;
...	...	@@ -3189,7 +3185,6 @@
3189	3185	.issue-form-labels {
3190	3186	.controls {
3191	3187	margin:0;
3192		- line-height:30px;
3193	3188
3194	3189	.labelInput {
3195	3190	width:90%;

...	...	@@ -257,6 +257,13 @@
257	257	&.large { padding: 9px 30px; font-size:15px; }
258	258	}
259	259	button.nbtn {
	260	+ &.square {
	261	+ padding: 1px 12px;
	262	+ height: 24px;
	263	+ line-height: 1;
	264	+ margin-top: 4px;
	265	+ margin-right: 4px;
	266	+ }
260	267	&.small { padding:1px 10px; height:24px; line-height:1; }
261	268	&.medium { padding:4px 20px; height:30px; line-height:1; }
262	269	&.large { padding:8px 30px; height:36px; line-height:1; font-size:15px; }
...	...	@@ -293,10 +300,8 @@
293	300
294	301	/ issue label /
295	302	.issue-label {
296		- background:#f7f7f7;
297		- border:1px solid rgba(0,0,0,0.1);/none;/
298		- padding:2px 6px 2px 7px; margin-right:5px;
299		- font-size:11px; font-weight:bold;
	303	+ background:#f9f9f9;
	304	+ font-size:11px;
300	305	text-shadow:none;
301	306	-webkit-transition-duration:0.25s;
302	307	cursor: pointer;
...	...	@@ -312,12 +317,12 @@
312	317	/&.editable .delete { display:inline; }/
313	318
314	319	&.list-label {
315		- padding:0 2px;
	320	+ padding:2px 3px;
316	321	font-weight:normal;
317	322	}
318	323
319	324	&.active {
320		- .border-radius(2px);
	325	+ .border-radius(1px);
321	326	&.active-white { color:#fff; }
322	327	&.active-dimgray { color:#696969; }
323	328	}
...	...	@@ -330,8 +335,14 @@
330	335	}
331	336	span.issue-label {
332	337	display: inline-block;
333		- overflow: hidden; vertical-align: middle;
	338	+ overflow: hidden;
334	339	line-height: 20px;
	340	+ margin-right: 5px;
	341	+ padding: 2px 6px;
	342	+ &:hover {
	343	+ background: #DFDFDF;
	344	+ .opacity(100);
	345	+ }
335	346	}
336	347
337	348	.dropdown-menu .issue-label:hover { .opacity(100); }
...	...	@@ -1313,3 +1324,10 @@
1313	1324	right:5px;
1314	1325	}
1315	1326	}
	1327	+
	1328	+.control-label{
	1329	+ font-weight: bold;
	1330	+ display: block;
	1331	+ padding: 4px 4px 0px 4px;
	1332	+ color: 666;
	1333	+}

...	...	@@ -292,7 +292,7 @@
292	292	var sActiveCSSTarget = '.issue-label.active[data-labelId="' + oLabel.id + '"]';
293	293
294	294	var aDefaultCss = [];
295		- var sDefaultCssSkel = 'box-shadow: inset 3px 0 0px ' + oLabel.color;
	295	+ var sDefaultCssSkel = 'box-shadow: inset 2px 0 0px ' + oLabel.color;
296	296	["", "-moz-", "-webkit"].forEach(function(sPrefix){
297	297	aDefaultCss.push(sPrefix + sDefaultCssSkel);
298	298	});

...	...	@@ -54,7 +54,7 @@
54	54
55	55	htVar.aColors = htOptions.aColors \|\| ['#da5454','#f86ca0','#ff9e9d','#ffcc33','#f8c86c','#ff9933','#99ca3c','#3fb8af','#22b4b9','#6ca6f8','#4d68b1','#9966cc'];
56	56	htVar.sTplEditor = htOptions.sTplEditor \|\| $("#tplYobiLabelEditor").text();
57		- htVar.sTplBtnColor = htOptions.sTplBtnColor \|\| '<button type="button" class="issue-label issueColor nbtn small" style="background-color:${color}">';
	57	+ htVar.sTplBtnColor = htOptions.sTplBtnColor \|\| '<button type="button" class="issue-label issueColor nbtn square" style="background-color:${color}">';
58	58	}
59	59
60	60	/**

Delete comment