Merge pull request #230 from 67P/refactor/sidebar_item_styles

Port sidebar item CSS to Tailwind

app/components/add-chat-account/template.hbs

@@ -1,5 +1,5 @@
 <div class="mb-10 border-b border-gray-200">
-  <nav class="tabs -mb-px flex" aria-label="Account type">
+  <nav class="hc-tabs -mb-px flex" aria-label="Account type">
     <button class={{if (eq this.accountType "xmpp") "active"}} type="button"
             {{on "click" (fn this.chooseAccountType "xmpp")}}>
       XMPP

app/components/channel-nav/template.hbs

@@ -2,23 +2,33 @@
     {{will-destroy this.unbindKeyboardShortcuts}}
     class="pt-6">
   {{#each this.coms.groupedChannelsByDomain as |subspace|}}
-    <li class="block relative width-full mb-6">
+    <li class="block relative width-full mb-6 overflow-hidden whitespace-nowrap">
       <h3 class="px-4 mb-2 text-sm opacity-80">{{subspace.domain}}</h3>
       <ul>
         {{#each subspace.channels as |channel|}}
-          <li class="channel {{if channel.connected "connected" "disconnected"}} {{channel.unreadMessagesClass}} {{if channel.visible "active" ""}}">
+          <li class="channel group relative {{if channel.connected "connected" "disconnected"}} {{channel.unreadMessagesClass}} {{if channel.visible "active bg-white bg-opacity-20" ""}}">
             {{#if channel.isUserChannel}}
-              <LinkTo @route="user-channel" @model={{channel}}>{{channel.name}}</LinkTo>
+              <LinkTo @route="user-channel" @model={{channel}} class="hc-sidebar-item">
+                {{channel.name}}
+              </LinkTo>
             {{else}}
-              <LinkTo @route="channel" @model={{channel}}>#&thinsp;{{channel.shortName}}</LinkTo>
+              <LinkTo @route="channel" @model={{channel}} class="hc-sidebar-item">
+                #&thinsp;{{channel.shortName}}
+              </LinkTo>
             {{/if}}
-            <a {{on "click" (fn @onLeaveChannel channel)}} class="leave-channel" title="Leave {{channel.name}}">x</a>
+            <a {{on "click" (fn @onLeaveChannel channel)}} title="Leave {{channel.name}}"
+               class="leave-channel hidden absolute w-7 h-7 leading-7
+                      top-0 right-0 text-center text-white
+                      group-hover:inline-block hover:bg-red-800">x</a>
           </li>
         {{/each}}
       </ul>
     </li>
   {{/each}}
 </ul>
 <p>
-  <a {{on "click" this.joinChannel}} class="join-channel" role="button">+</a>
+  <a {{on "click" this.joinChannel}} role="button"
+    class="hc-sidebar-item text-sm cursor-pointer opacity-80 hover:opacity-100">
+    + Add channel
+  </a>
 </p>

app/components/link-to-username/template.hbs

@@ -1 +1,5 @@
-<LinkTo @route="user-channel" @model={{this.usernameWithoutPrefix}} class={{this.role}}>{{@username}}</LinkTo>
+<LinkTo @route="user-channel"
+        @model={{this.usernameWithoutPrefix}}
+        class="hc-sidebar-item {{this.role}}">
+  {{username}}
+</LinkTo>

app/components/user-list/template.hbs

@@ -7,7 +7,7 @@
       {{#if @allowUserChannels}}
         <li><LinkToUsername @username={{username}} /></li>
       {{else}}
-        <li><a>{{username}}</a></li>
+        <li><a class="hc-sidebar-item">{{username}}</a></li>
       {{/if}}
     {{/each}}
 

app/styles/app.scss

@@ -85,19 +85,29 @@ header {
   color: #aaa;
 }
 
-// TODO create actual nav-tabs ember components, move directives to templates
 @layer components {
-  nav.tabs {
+  // TODO create actual nav-tabs ember components, move directives to templates
+  nav.hc-tabs {
     a, button {
-      @apply border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-300 w-1/2 py-4 px-1 text-center border-b-2;
+      @apply border-transparent text-gray-500
+             hover:text-gray-800 hover:border-gray-300
+             w-1/2 py-4 px-1 text-center border-b-2;
     }
 
     a.active, button.active {
       @apply border-blue-600 text-blue-600;
     }
   }
+
+  a.hc-sidebar-item {
+    width: 168px;
+    @apply block px-4 h-7 leading-7
+           overflow-hidden overflow-ellipsis
+           hover:bg-white hover:bg-opacity-20;
+  }
 }
 
+
 @import "layout";
 @import "buttons";
 @import "forms";
@@ -107,5 +117,4 @@ header {
 @import "components/message-chat";
 @import "components/message-input";
 @import "components/notification-topic-change";
-@import "components/user-list";
 @import "space";

app/styles/components/channel-nav.scss

@@ -12,24 +12,6 @@ nav#channels {
     > li {
       > ul {
         li {
-          width: 168px;
-          overflow: hidden;
-          white-space: nowrap;
-
-          &:hover {
-            background-color: rgba(255,255,255,0.2);
-
-            a {
-              &.leave-channel {
-                display: inline-block;
-              }
-            }
-          }
-
-          &.active {
-            background-color: rgba(255,255,255,0.2);
-          }
-
           &.unread-messages {
             a {
               color: lightblue;
@@ -44,36 +26,4 @@ nav#channels {
       }
     }
   }
-
-  a {
-    display: block;
-    padding: 0 1em;
-    height: 1.6em;
-    line-height: 1.6em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.join-channel {
-      cursor: pointer;
-      opacity: 0.5;
-    }
-
-    &.leave-channel {
-      position: absolute;
-      display: none;
-      width: 1.6em;
-      height: 1.6em;
-      line-height: 1.6em;
-      right: 0;
-      top: 0;
-      padding: 0;
-      text-align: center;
-      color: #fff;
-
-      &:hover {
-        background-color: darkred;
-        color: #fff;
-      }
-    }
-  }
 }