Made the UI feel a little more at home in Chrome

davgothic · Aug 11, 2011 · d81e4e3 · d81e4e3
1 parent 65f3836
commit d81e4e3
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git a/media/scripts/lipsum.coffee b/media/scripts/lipsum.coffee
@@ -15,6 +15,12 @@ lipsum =
 		document.getElementById("copy").onclick = ->
 			document.getElementById("lipsum").select()
 			document.execCommand("Copy")
+			document.getElementById("copy").value = "Copied!"
+			document.getElementById("copy").disabled = "disabled"
+			copyCallback = ->
+				document.getElementById("copy").value = "Copy to clipboard"
+				document.getElementById("copy").disabled = false
+			setTimeout copyCallback, 1000
 
 		document.getElementById("paragraphs").value = @numParagraphs
 		document.getElementById("paragraphs").onkeyup = =>

diff --git a/media/scripts/lipsum.js b/media/scripts/lipsum.js
diff --git a/media/styles/style.css b/media/styles/style.css
@@ -40,23 +40,40 @@ label {
 }
 
 #copy {
-	border: 1px solid #ccc;
+	background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+	border: 1px solid #aaa;
 	color: #444;
-	cursor: pointer;
-	padding: 5px 0;
+	margin-bottom: 0;
+	padding: 3px 12px 3px 12px;
 	width: 480px;
-	text-shadow: 1px 1px 0 #fff;
+	-webkit-border-radius: 2px;
+	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+	-webkit-user-select: none;
 }
 
 #copy:hover {
-	border: 1px solid #aaa;
+	background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
+	border-color: #999;
 	color: #222;
+	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+#copy:active {
+	background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
+	color: #333;
+	-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+#copy[disabled] {
+	background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+	border-color: #aaa;
+	color: #888;
+	-webkit-box-shadow: none;
 }
 
 #lipsum {
 	background: #fafafa;
 	border: none;
-	border-radius: 5px;
 	color: #444;
 	height: 300px;
 	margin-top: 10px;
@@ -65,4 +82,5 @@ label {
 	padding: 10px;
 	resize: none;
 	width: 460px;
+	-webkit-border-radius: 5px;
 }
diff --git a/popup.html b/popup.html
@@ -9,7 +9,7 @@
 	<div>
 		<label class="paragraphs">Paragraphs: <input type="text" value="3" name="paragraphs" id="paragraphs" maxlength="2" /></label>
 		<label class="words">Words Per Paragraph: <input type="text" value="100" name="words" id="words" maxlength="3" /></label>
-		<label class="ptags">Add &lt;p&gt; tags: <input type="checkbox" value="yes" name="ptags" id="ptags" /></label>
+		<label class="ptags"><input type="checkbox" value="yes" name="ptags" id="ptags" /> Add paragraph tags</label>
 	</div>
 	<input type="button" value="Copy to clipboard" id="copy" />
 	<textarea id="lipsum"></textarea>