fixed styles and added editable test to demo page

hailwood · Nov 27, 2012 · c61a0a6 · c61a0a6
1 parent b6c1f45
commit c61a0a6
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 3 deletions.
diff --git a/css/tagit-awesome-blue.css b/css/tagit-awesome-blue.css
@@ -171,6 +171,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

diff --git a/css/tagit-awesome-orange.css b/css/tagit-awesome-orange.css
@@ -171,6 +171,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     color: #535353;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

diff --git a/css/tagit-dark-grey.css b/css/tagit-dark-grey.css
@@ -123,6 +123,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     text-shadow: none;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

diff --git a/css/tagit-simple-blue.css b/css/tagit-simple-blue.css
@@ -122,6 +122,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     color: #535353;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

diff --git a/css/tagit-simple-green.css b/css/tagit-simple-green.css
@@ -122,6 +122,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     color: #535353;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

diff --git a/css/tagit-simple-grey.css b/css/tagit-simple-grey.css
@@ -122,6 +122,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     color: #535353;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

diff --git a/css/tagit-stylish-yellow.css b/css/tagit-stylish-yellow.css
@@ -131,6 +131,16 @@ ul.tagit li.tagit-choice a.tagit-close:hover {
     color: #f00;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
 ul.tagit input[type="text"] {
     -moz-box-sizing: border-box;
     border: none !important;

diff --git a/css/themeroller/tagit.css b/css/themeroller/tagit.css
@@ -34,6 +34,25 @@ ul.tagit.ui-widget li.tagit-choice a.tagit-close{
 	margin-top: -8px;
 }
 
+ul.tagit div.tagit-label.hidden {
+	display: none;
+}
+
+ul.tagit input.tagit-edit {
+	margin: 0px 0px 0px 2px;
+	border: none;
+	line-height: 16px;
+}
+
+ul.tagit input[type="text"] {
+    -moz-box-sizing: border-box;
+    border: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    width: inherit !important;
+    outline: none;
+}
+
 ul.tagit.ui-widget li.tagit-new input[type="text"].tagit-input,
 ul.tagit.ui-widget li.tagit-new input[type="text"].tagit-input:active,
 ul.tagit.ui-widget li.tagit-new input[type="text"].tagit-input:hover,

diff --git a/index.html b/index.html
@@ -47,6 +47,7 @@
 	  $('#demo5').tagit({maxLength:5, maxTags:5 });
 	  $('#demo6').tagit({tagSource:availableTags, sortable:true});
 	  $('#demo7').tagit({tagSource:availableTags, sortable:'handle'});
+	  $('#demo9').tagit({tagSource:availableTags, editable: true});
 
 
 	  $('#demo1GetTags').click(function () {
@@ -73,7 +74,12 @@
 	  $('#demo7GetTags').click(function () {
 		showTags($('#demo7').tagit('tags'))
 	  });
-
+	  $('#demo8GetTags').click(function () {
+		showTags($('#demo8').tagit('tags'))
+	  });
+	  $('#demo9GetTags').click(function () {
+		showTags($('#demo9').tagit('tags'))
+	  });
 	  function showTags(tags) {
 		console.log(tags);
 		var string = "Tags (label : value)\r\n";
@@ -227,6 +233,25 @@ <h3>Sortable : handle</h3>
   </div>
 </div>
 
+<h3>Editable</h3>
+
+<div class="box">
+  <div class="note">
+	Click on a tag to edit it!
+  </div>
+
+  <ul id="demo9" name="demo9">
+	<li>here</li>
+	<li>are</li>
+	<li>some</li>
+	<li>initial</li>
+	<li>tags</li>
+  </ul>
+  <div class="buttons">
+	<button id="demo9GetTags" value="Get Tags">Get Tags</button>
+  </div>
+</div>
+
 <h3>Custom Autocomplete</h3>
 
 <div class="box">

diff --git a/index.themeroller.html b/index.themeroller.html
@@ -235,7 +235,7 @@
 		  .append(rendered)
 		  .appendTo(ul);
 	  };
-
+      $('#demo9').tagit({tagSource:availableTags, editable: true});
 
 	  $('#demo1GetTags').click(function () {
 		showTags($('#demo1').tagit('tags'))
@@ -264,7 +264,9 @@
 	  $('#demo8GetTags').click(function () {
 		showTags($('#demo8').tagit('tags'))
 	  });
-
+	  $('#demo9GetTags').click(function () {
+		showTags($('#demo9').tagit('tags'))
+	  });
 	  function showTags(tags) {
 		console.log(tags);
 		var string = "Tags (label : value)\r\n";
@@ -429,6 +431,24 @@ <h3>Custom Autocomplete</h3>
   </div>
 </div>
 
+<h3>Editable</h3>
+
+<div class="box">
+  <div class="note">
+	Click on a tag to edit it!
+  </div>
+
+  <ul id="demo9" name="demo9">
+	<li>here</li>
+	<li>are</li>
+	<li>some</li>
+	<li>initial</li>
+	<li>tags</li>
+  </ul>
+  <div class="buttons">
+	<button id="demo9GetTags" value="Get Tags">Get Tags</button>
+  </div>
+</div>
 
 <h2></h2>