add color pallette ・ 0e4b8d3 ・ Gitprep

- add color pallette;
- Browse files
- Yuki Kimoto commited on 2016-07-28
- 1 parent 440abcc
  
  commit 0e4b8d3fcf9e792f504f47d68895488b9d6cbde4

Showing 2 changed files with 38 additions and 5 deletions

+26 -2

public/css/common.css

@@ -46,17 +46,29 @@
   padding:10px;
   margin-bottom:20px;
 }
+.labels-edit-label-color-area {
+  display:inline-block;
+}
 .labels-edit-label-id {
   width:400px;
-  padding:9px;
+  padding:6px;
   border-radius:3px;
   border: 1px solid #ddd;
 }
 .labels-edit-label-color {
   width:100px;
-  padding:8px;
+  padding:6px;
   border-radius:3px;
   border: 1px solid #ddd;
+  padding-left:28px;
+}
+.labels-edit-label-color-palette {
+  width:15px;
+  height:15px;
+  display:inline-block;
+  position:relative;
+  top:3px;
+  left:-95px;
 }
 .labels-create-label-id {
   width:400px;
@@ -64,11 +76,23 @@
   border-radius:3px;
   border: 1px solid #ddd;
 }
+.labels-create-label-color-area {
+  display:inline-block;
+}
 .labels-create-label-color {
   width:100px;
   padding:6px;
   border-radius:3px;
   border: 1px solid #ddd;
+  padding-left:28px;
+}
+.labels-create-label-color-palette {
+  width:15px;
+  height:15px;
+  display:inline-block;
+  position:relative;
+  top:3px;
+  left:-95px;
 }
 .labels-create-left {
   width:70%;

+12 -3

templates/labels.html.ep

View

@@ -12,6 +12,9 @@
     append => 'order by id'
   )->all;
   
+  # Default color;
+  my $default_color = "#" . sprintf('%02x', int rand 255) . sprintf('%02x', int rand 255) . sprintf('%02x', int rand 255);
+
   layout 'common', title => "Labels - $user_id/$project_id";
 %>
 
@@ -47,10 +50,13 @@
       New label
     </div>
   </div>
-  <form class="labels-create-panel" action="<%= url_for %>" method="post" style="display:none">
+  <form class="labels-create-panel" action="<%= url_for %>" method="post" style="display:nonea">
     <div class="labels-create-left">
       <%= input_tag 'label-id', class => 'labels-create-label-id' %>
-      <%= input_tag 'color', class => 'labels-create-label-color' %>
+      <div class="labels-create-label-color-area">
+        <%= input_tag 'color' => $default_color, class => 'labels-create-label-color' %>
+        <div class ="labels-create-label-color-palette" style="background:<%= $default_color %>;"></div>
+      </div>
     </div>
     <div class="labels-create-right">
       <div class="labels-create-cancel-btn btn">
@@ -84,7 +90,10 @@
         <div class="labels-edit-area" style="display:none">
           <div class="labels-left">
             <%= input_tag 'label-id' => $label->{id}, class => 'labels-edit-label-id' %>
-            <%= input_tag 'color' => $label->{color}, class => 'labels-edit-label-color' %>
+            <div class="labels-edit-label-color-area">
+              <%= input_tag 'color' => $label->{color}, class => 'labels-edit-label-color' %>
+              <div class ="labels-edit-label-color-palette" style="background:<%= $label->{color} %>;"></div>
+            </div>
           </div>
           <div class="labels-right">
             <div class="labels-edit-cancel-btn btn">

...	...	@@ -46,17 +46,29 @@
46	46	padding:10px;
47	47	margin-bottom:20px;
48	48	}
	49	+.labels-edit-label-color-area {
	50	+ display:inline-block;
	51	+}
49	52	.labels-edit-label-id {
50	53	width:400px;
51		- padding:9px;
	54	+ padding:6px;
52	55	border-radius:3px;
53	56	border: 1px solid #ddd;
54	57	}
55	58	.labels-edit-label-color {
56	59	width:100px;
57		- padding:8px;
	60	+ padding:6px;
58	61	border-radius:3px;
59	62	border: 1px solid #ddd;
	63	+ padding-left:28px;
	64	+}
	65	+.labels-edit-label-color-palette {
	66	+ width:15px;
	67	+ height:15px;
	68	+ display:inline-block;
	69	+ position:relative;
	70	+ top:3px;
	71	+ left:-95px;
60	72	}
61	73	.labels-create-label-id {
62	74	width:400px;
...	...	@@ -64,11 +76,23 @@
64	76	border-radius:3px;
65	77	border: 1px solid #ddd;
66	78	}
	79	+.labels-create-label-color-area {
	80	+ display:inline-block;
	81	+}
67	82	.labels-create-label-color {
68	83	width:100px;
69	84	padding:6px;
70	85	border-radius:3px;
71	86	border: 1px solid #ddd;
	87	+ padding-left:28px;
	88	+}
	89	+.labels-create-label-color-palette {
	90	+ width:15px;
	91	+ height:15px;
	92	+ display:inline-block;
	93	+ position:relative;
	94	+ top:3px;
	95	+ left:-95px;
72	96	}
73	97	.labels-create-left {
74	98	width:70%;

...	...	@@ -12,6 +12,9 @@
12	12	append => 'order by id'
13	13	)->all;
14	14
	15	+ # Default color;
	16	+ my $default_color = "#" . sprintf('%02x', int rand 255) . sprintf('%02x', int rand 255) . sprintf('%02x', int rand 255);
	17	+
15	18	layout 'common', title => "Labels - $user_id/$project_id";
16	19	%>
17	20
...	...	@@ -47,10 +50,13 @@
47	50	New label
48	51	</div>
49	52	</div>
50		- <form class="labels-create-panel" action="<%= url_for %>" method="post" style="display:none">
	53	+ <form class="labels-create-panel" action="<%= url_for %>" method="post" style="display:nonea">
51	54	<div class="labels-create-left">
52	55	<%= input_tag 'label-id', class => 'labels-create-label-id' %>
53		- <%= input_tag 'color', class => 'labels-create-label-color' %>
	56	+ <div class="labels-create-label-color-area">
	57	+ <%= input_tag 'color' => $default_color, class => 'labels-create-label-color' %>
	58	+ <div class ="labels-create-label-color-palette" style="background:<%= $default_color %>;"></div>
	59	+ </div>
54	60	</div>
55	61	<div class="labels-create-right">
56	62	<div class="labels-create-cancel-btn btn">
...	...	@@ -84,7 +90,10 @@
84	90	<div class="labels-edit-area" style="display:none">
85	91	<div class="labels-left">
86	92	<%= input_tag 'label-id' => $label->{id}, class => 'labels-edit-label-id' %>
87		- <%= input_tag 'color' => $label->{color}, class => 'labels-edit-label-color' %>
	93	+ <div class="labels-edit-label-color-area">
	94	+ <%= input_tag 'color' => $label->{color}, class => 'labels-edit-label-color' %>
	95	+ <div class ="labels-edit-label-color-palette" style="background:<%= $label->{color} %>;"></div>
	96	+ </div>
88	97	</div>
89	98	<div class="labels-right">
90	99	<div class="labels-edit-cancel-btn btn">