Some styling work for tags

3 files changed, 124 insertions, 13 deletions

diff --git a/etherpad/src/plugins/twitterStyleTags/static/css/pad.css b/etherpad/src/plugins/twitterStyleTags/static/css/pad.css
new file mode 100644
index 0000000..e144de5
--- /dev/null
+++ b/etherpad/src/plugins/twitterStyleTags/static/css/pad.css
@@ -0,0 +1,70 @@
+.padtag a,
+.padtag a:visited,
+a.padtag,
+a.padtag:visited,
+a.anti_padtag,
+a.anti_padtag:visited {
+ text-decoration: none !important;
+ color: #2e2eaa !important;
+
+ border-style: solid;
+ border-width: 1px;
+
+ border-left-color: #8c8c8c;
+ border-right-color: #707070;
+ border-top-color: #9c9c9c;
+ border-bottom-color: #606060;
+
+ -moz-border-radius-topleft: 3pt;
+ -moz-border-radius-topright: 3pt;
+ -moz-border-radius-bottomleft: 3pt;
+ -moz-border-radius-bottomright: 3pt;
+ -webkit-border-top-left-radius: 3pt;
+ -webkit-border-top-right-radius: 3pt;
+ -webkit-border-bottom-left-radius: 3pt;
+ -webkit-border-bottom-right-radius: 3pt;
+
+ padding-left: 2pt;
+ padding-right: 2pt
+}
+
+a.anti_padtag,
+a.anti_padtag:visited {
+ color: #aa2e2e !important;
+ border-left-color: #aa8c8c;
+ border-right-color: #aa7070;
+ border-top-color: #aa9c9c;
+ border-bottom-color: #aa6060;
+}
+
+.padtag_public a,
+.padtag_public a:visited,
+a.padtag_public,
+a.padtag_public:visited {
+ color: #2e772e !important;
+ background-color: #99ff99 !important;
+
+ border-style: solid;
+ border-width: 1px;
+
+ border-left-color: #8caa8c;
+ border-right-color: #70aa70;
+ border-top-color: #9caa9c;
+ border-bottom-color: #60aa60;
+}
+
+.padtag_writable a,
+.padtag_writable a:visited,
+a.padtag_writable,
+a.padtag_writable:visited {
+ color: #2e2e77 !important;
+ background-color: #9999ff !important;
+
+ border-style: solid;
+ border-width: 1px;
+
+ border-left-color: #8c8caa;
+ border-right-color: #7070aa;
+ border-top-color: #9c9caa;
+ border-bottom-color: #6060aa;
+}
diff --git a/etherpad/src/plugins/twitterStyleTags/static/css/tagBrowser.css b/etherpad/src/plugins/twitterStyleTags/static/css/tagBrowser.css
new file mode 100644
index 0000000..97c37f5
--- /dev/null
+++ b/etherpad/src/plugins/twitterStyleTags/static/css/tagBrowser.css
@@ -0,0 +1,36 @@
+dt {
+  padding-top: 2pt;
+  padding-bottom: 2pt;
+}
+
+dd {
+  padding-left: 20pt;
+  padding-top: 2pt;
+  padding-bottom: 2pt;
+}
+
+h1 {
+ font-size: 14pt;
+ margin-top: 10pt;
+}
+
+h2 {
+ font-size: 10pt;
+ margin-top: 5pt;
+}
+
+#editorcontainer {
+ overflow: auto;
+}
+
+.query-refiner {
+ float: right;
+ padding: 10pt;
+ margin: 5pt;
+ border: 1px solid #9C9C9C;
+
+}
+
+.query-refiner h1 {
+ margin-top: 0;
+}
diff --git a/etherpad/src/plugins/twitterStyleTags/templates/tagBrowser.ejs b/etherpad/src/plugins/twitterStyleTags/templates/tagBrowser.ejs
index ba00aa2..1e504ff 100644
--- a/etherpad/src/plugins/twitterStyleTags/templates/tagBrowser.ejs
+++ b/etherpad/src/plugins/twitterStyleTags/templates/tagBrowser.ejs
@@ -16,6 +16,8 @@ limitations under the License. */ %>
  helpers.setBodyId("padbody");
  helpers.addBodyClass("limwidth nonpropad nonprouser");
  helpers.includeCss("pad2_ejs.css");
+ helpers.includeCss("plugins/twitterStyleTags/tagBrowser.css");
+ helpers.includeCss("plugins/twitterStyleTags/pad.css");
  helpers.setRobotsPolicy({index: false, follow: false})
  helpers.includeJQuery();
  helpers.includeCometJs();
@@ -89,27 +91,30 @@ limitations under the License. */ %>
     </div>
     <div style="height: 268px;" id="editorcontainerbox">
       <div id="editorcontainer" style="padding:5pt; height: 600pt;">
+       <div class="query-refiner">
+	<h1>Refine your query</h1>
+	<h2>Search for pads that have a tag</h2>
+	<% for (i = 0; i < newTags.length; i++) { %>
+	 <a href="/ep/tag/?query=<%= tagsToQuery(tags.concat([newTags[i].tagname]),antiTags) %>" class="padtag" title="<%= newTags[i].matches %> matches">#<%= newTags[i].tagname %></a>
+	<% } %>
+
+	<h2>Search for pads that <em>doesn't</em> have a tag</h2>
+	<% for (i = 0; i < newTags.length; i++) { %>
+	 <a href="/ep/tag/?query=<%= tagsToQuery(tags,antiTags.concat([newTags[i].tagname])) %>" class="anti_padtag" title="<%= newTags[i].antimatches %> matches">#<%= newTags[i].tagname %></a>
+	<% } %>
+       </div>
+
        <h1>Current query</h1>
        <% if (tags.length == 0 && antiTags.length == 0) { %>
         &lt; No current query; please select some tags below to search for pads &gt;
        <% } else { %>
 	<% for (i = 0; i < tags.length; i++) { %>
-	 <a href="/ep/tag/?query=<%= tagsToQuery(tags.filter(function (tag) { return tag != tags[i]}), antiTags) %>" class="tag" title="<%= tags[i] %> matches"><%= tags[i] %></a>
+	 <a href="/ep/tag/?query=<%= tagsToQuery(tags.filter(function (tag) { return tag != tags[i]}), antiTags) %>" class="padtag" title="<%= tags[i] %> matches">#<%= tags[i] %></a>
 	<% } %>
 	<% for (i = 0; i < antiTags.length; i++) { %>
-	 <a href="/ep/tag/?query=<%= tagsToQuery(tags, antiTags.filter(function (tag) { return tag != antiTags[i]})) %>" class="tag" title="<%= antiTags[i] %> matches">!<%= antiTags[i] %></a>
+	 <a href="/ep/tag/?query=<%= tagsToQuery(tags, antiTags.filter(function (tag) { return tag != antiTags[i]})) %>" class="anti_padtag" title="<%= antiTags[i] %> matches">!#<%= antiTags[i] %></a>
 	<% } %>
        <% } %>
-       <h1>Refine your query</h1>
-       <h2>Search for pads that have a tag</h2>
-       <% for (i = 0; i < newTags.length; i++) { %>
-        <a href="/ep/tag/?query=<%= tagsToQuery(tags.concat([newTags[i].tagname]),antiTags) %>" class="tag" title="<%= newTags[i].matches %> matches"><%= newTags[i].tagname %></a>
-       <% } %>
-
-       <h2>Search for pads that <em>doesn't</em> have a tag</h2>
-       <% for (i = 0; i < newTags.length; i++) { %>
-        <a href="/ep/tag/?query=<%= tagsToQuery(tags,antiTags.concat([newTags[i].tagname])) %>" class="anti_tag" title="<%= newTags[i].antimatches %> matches"><%= newTags[i].tagname %></a>
-       <% } %>
 
        <h1>Matching pads</h1>
        <dl>
@@ -125,7 +130,7 @@ limitations under the License. */ %>
          <dt><a href="/<%= matchingPadUrl %>"><%= matchingPadId %></a><dt>
          <dd>
 	  <% for (j = 0; j < matchingPads[i].TAGS.length; j++) { %>
-	   <a href="/ep/tag/?query=<%= tagsToQuery(tags.filter(function (tag) { return tag != matchingPads[i].TAGS[j]}), antiTags) %>" class="tag" title="<%= matchingPads[i].TAGS[j] %> matches"><%= matchingPads[i].TAGS[j] %></a>
+	   <a href="/ep/tag/?query=<%= tagsToQuery(tags.filter(function (tag) { return tag != matchingPads[i].TAGS[j]}), antiTags) %>" class="padtag" title="<%= matchingPads[i].TAGS[j] %> matches">#<%= matchingPads[i].TAGS[j] %></a>
 	  <% } %>
          </dd>
         <% } %>