From 4264783f66f55a96c534824e4b63d18b271ceb4b Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 10 Jul 2015 14:26:22 +0200
Subject: [PATCH] use proper inline style for bookmark add button and feedback

---
 css/bookmarks.css  | 23 ++++++++++++++++-------
 js/bookmarks.js    |  7 ++++---
 templates/main.php |  3 +--
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/css/bookmarks.css b/css/bookmarks.css
index 3c9d593b..d8de09f8 100644
--- a/css/bookmarks.css
+++ b/css/bookmarks.css
@@ -3,9 +3,9 @@ input.disabled, input.disabled:hover, input.disabled:focus {
     background-color: #ddd;
     color: gray;
 }
-#settingsbtn { background: transparent; color:#666; 
+#settingsbtn { background: transparent; color:#666;
                border-bottom: 1px solid #ddd; border-top: 1px solid #fff; }
-#settingsbtn:hover { background:#dbdbdb !important; color:#999; 
+#settingsbtn:hover { background:#dbdbdb !important; color:#999;
                      border-bottom: 1px solid #CCCCCC; border-top: 1px solid #D4D4D4; }
 #settingsbtn img { width: 18px; height: 18px; margin: 10px; }
 
@@ -48,6 +48,15 @@ input.disabled, input.disabled:hover, input.disabled:focus {
 .bookmarks_addBml {
     text-decoration: underline;
 }
+#bookmark_add_submit {
+    background-color: transparent;
+    border: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    opacity: .5;
+    padding: 17px 14px;
+}
 
 .bookmarks_label {
     width: 7em;
@@ -262,7 +271,7 @@ li:hover > .tags_actions > em { display : none; }
 
 #tag_filter ul li:hover > a {
     background-color: transparent;
-} 
+}
 
 #tag_filter ul.tagit li.tagit-choice .close{
     margin-top: -8px;
@@ -308,17 +317,17 @@ ul.tagit li.tagit-choice .close .text-icon {
 
 /*
 .bm_view_img .bookmark_single:hover .bookmark_url{
-        display:block; 
+        display:block;
 }
 .bm_view_img .bookmark_single .bookmark_url{
-        display:block; 
+        display:block;
 }
 */
 .bookmark_single:hover .bookmark_url { display: inline;  }
 .bookmark_single:hover .bookmark_url a[href]{ color:gray; }
 
 .bookmark_url { display: none; }
-.bookmark_form_title { 
+.bookmark_form_title {
     float: left;
     width:25%;
 }
@@ -427,4 +436,4 @@ ul.tagit li.tagit-choice .close .text-icon {
 #app-navigation a.bookmarklet {
     margin-top: 5px;
     padding: 0 5px 2px;
-}
\ No newline at end of file
+}
diff --git a/js/bookmarks.js b/js/bookmarks.js
index 7ffe0894..4c2ef22a 100644
--- a/js/bookmarks.js
+++ b/js/bookmarks.js
@@ -65,9 +65,11 @@ function decreaseAjaxCallCount() {
 
 function updateLoadingAnimation() {
 	if (ajaxCallCount === 0) {
-		$("#add_form_loading").css("visibility", "hidden");
+		$('#bookmark_add_submit').removeClass('icon-loading-small');
+		$('#bookmark_add_submit').addClass('icon-add');
 	} else {
-		$("#add_form_loading").css("visibility", "visible");
+		$('#bookmark_add_submit').removeClass('icon-add');
+		$('#bookmark_add_submit').addClass('icon-loading-small');
 	}
 }
 
@@ -417,4 +419,3 @@ function deleteTag() {
 		}
 	});
 }
-
diff --git a/templates/main.php b/templates/main.php
index 9f315fee..72bc9d78 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -33,8 +33,7 @@ function bookmarklet($bookmarkleturl) {
         <li>
             <form id="add_form">
                 <input type="text" id="add_url" value="" placeholder="<?php p($l->t('Address')); ?>"/>
-                <input type="submit" value="<?php p($l->t('Add')); ?>" id="bookmark_add_submit" />
-                <div id="add_form_loading"><img src="<?php print_unescaped(OCP\image_path("bookmarks", "loading.gif")); ?>"> </div>
+                <button id="bookmark_add_submit" title="Add" class="icon-add"></button>
             </form>
             <p id="tag_filter" class="open">
                 <input type="text" value="<?php if(isset($_['req_tag'])) p($_['req_tag']); else ""; ?>"/>