icons for widgets more rendering bugs

kandanapp · Apr 2, 2012 · a530c6a · a530c6a
1 parent e55ca68
commit a530c6a
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 62 deletions.
diff --git a/app/assets/images/media_icon.png b/app/assets/images/media_icon.png
diff --git a/app/assets/images/people_icon.png b/app/assets/images/people_icon.png
diff --git a/app/assets/javascripts/backbone/plugins/attachments.js.coffee b/app/assets/javascripts/backbone/plugins/attachments.js.coffee
@@ -1,6 +1,7 @@
 class Kandan.Plugins.Attachments
 
   @widget_title: "Media"
+  @widget_icon_url: "/assets/media_icon.png"
   @plugin_namespace: "Kandan.Plugins.Attachments"
 
   @options:
@@ -48,7 +49,7 @@ class Kandan.Plugins.Attachments
     return "/assets/file_icon.png"
 
   @file_item_template: _.template '''
-    <div class="file_item"><img src="<%= iconUrl %>"><a href="<%= url %>"><%= fileName %></a></div>
+    <div class="file_item"><a href="<%= url %>"><img src="<%= iconUrl %>"><span><%= fileName %></span></a></div>
   '''
 
   # TODO this part is very bad for APIs! shoudnt be exposing a backbone collection in a plugin.
@@ -104,4 +105,4 @@ class Kandan.Plugins.Attachments
       Kandan.Widgets.render @plugin_namespace
 
 
-# Kandan.Plugins.register "Kandan.Plugins.Attachments"
+# Kandan.Plugins.register "Kandan.Plugins.Attachments"
diff --git a/app/assets/javascripts/backbone/plugins/user_list.js.coffee b/app/assets/javascripts/backbone/plugins/user_list.js.coffee
@@ -1,6 +1,7 @@
 class Kandan.Plugins.UserList
 
   @widget_title: "People"
+  @widget_icon_url: "/assets/people_icon.png"
   @widget_name: "users"
   @plugin_namespace: "Kandan.Plugins.UserList"
 

diff --git a/app/assets/javascripts/backbone/widgets.js.coffee b/app/assets/javascripts/backbone/widgets.js.coffee
@@ -13,17 +13,20 @@ class Kandan.Widgets
 
   @template: _.template '''
     <div class="widget" id="widget_<%= element_id %>">
-      <div class="title"><%= title %></div>
-      <div class="content" id="<%= element_id %>"></div>
-      <div class="action_bar"></div>
+      <div class="widget_header">
+        <h3 style="background-image:url(<%= icon_url %>);"><%= title %></h3>
+      </div>
+      <div class="widget_content" id="<%= element_id %>"></div>
+      <div class="widget_action_bar"></div>
     </div>
   '''
 
   @init: (widget_namespace)->
     widget = eval(widget_namespace)
     $(".sidebar .widgets").append(@template({
       element_id: @widgets[widget_namespace],
-      title: widget.widget_title
+      title: widget.widget_title,
+      icon_url: widget.widget_icon_url
     }))
     @render(widget_namespace)
 

diff --git a/app/assets/stylesheets/_base.sass b/app/assets/stylesheets/_base.sass
@@ -14,10 +14,13 @@
   background-color: $header-bg-1
   +background-image(linear-gradient($header-bg-1, $header-bg-2))
   z-index: 10
-  padding: 5px
+  padding: 0 5px 5px 5px
+
+.logo
+  padding-top: 5px
 
 #app_body
-  height: 100%
+  height: 96%
   padding-top: $header-height
 
 html

diff --git a/app/assets/stylesheets/_chat_area.sass b/app/assets/stylesheets/_chat_area.sass
@@ -10,16 +10,16 @@
     border: none
     a
       color: $active-tab-color !important
+      &:hover
+        text-decoration: underline
+
+.close_channel
+  font-size: 12px
 
 html body .ui-tabs .ui-tabs-nav li
   top: 3px !important
   margin-right: 5px
 
-a.ui-icon-close
-  margin-top: 4px
-  color: $header-bg-1
-  cursor: hover
-
 .create_channel
   cursor: hover
 

diff --git a/app/assets/stylesheets/_sidebar.sass b/app/assets/stylesheets/_sidebar.sass
@@ -4,65 +4,83 @@
   width: $sidebar-width
   float: right
   border-left: 1px solid #F2F4F6
-  .widgets
+
+.widgets
+  float: left
+  width: 100%
+  padding-left: 15px
+  padding-right: 15px
+  .widget
+    margin-bottom: 20px
+    border: 1px solid #D0D5D8
+    +border-top-radius(4px)
+    +border-bottom-radius(7px)
+    background: #F3F8F9
     float: left
     width: 100%
-    padding-left: 15px
-    padding-right: 15px
-    .widget
-      margin-bottom: 20px
-      border: 1px solid #D0D5D8
-      +border-top-radius(4px)
-      +border-bottom-radius(7px)
-      background: #F3F8F9
-      float: left
-      width: 100%
-      +box-shadow(0px 2px #d1d6d9)
-      .title
-        +background-image(linear-gradient($widget-title-bg-1, $widget-title-bg-2))
-        +border-top-left-radius(4px)
-        +border-top-right-radius(4px)
-        border-bottom: 1px solid #DBDFE0
-        float: left
-        width: 100%
-        padding-left: 10px
-        padding-top: 5px
-        padding-bottom: 5px
-        font-size: 13px
-        text-transform: uppercase
-        color: $widget-title-color
-      .content
-        +border-bottom-radius(7px)
-        float: left
-        width: 100%
-        clear: both
-        background: #F3F8F9
-        padding-left: 10px
-        font-size: 13px
-      .action_bar
-        +border-bottom-radius(7px)
-        font-size: 13px
-        text-align: center
-        line-height: 20px
-        color: #808789
-        float: left
-        width: 100%
-        clear: both
-        height: 40px
-        min-height: 40px
-        border-top: 2px solid #D2D8D8
-        background: #E9EFF0
+    +box-shadow(0px 2px #d1d6d9)
 
+.widget_header
+  +background-image(linear-gradient($widget-title-bg-1, $widget-title-bg-2))
+  +border-top-left-radius(4px)
+  +border-top-right-radius(4px)
+  border-bottom: 1px solid #DBDFE0
+  float: left
+  width: 100%
+  padding-left: 10px
+  padding-top: 5px
+  padding-bottom: 5px
+  font-size: 13px
+  line-height: 20px
+  text-transform: uppercase
+  color: $widget-title-color
+  h3
+    margin: 0 !important
+    padding-left: 30px
+    background-repeat: no-repeat
+    background-position: center left
+    background-size: 20px auto
+
+
 
+.widget_content
+  +border-bottom-radius(7px)
+  float: left
+  width: 100%
+  clear: both
+  background: #F3F8F9
+  padding-left: 10px
+  font-size: 13px
+
+.widget_action_bar
+  +border-bottom-radius(7px)
+  font-size: 13px
+  text-align: center
+  line-height: 40px
+  color: #808789
+  float: left
+  width: 100%
+  clear: both
+  height: 40px
+  min-height: 40px
+  border-top: 2px solid #D2D8D8
+  background: #E9EFF0
 
 .search
   min-width: 100px
   float: right
   text-align: right
+  padding: 0px 5px
+  border: 1px solid $header-bg-2
+  border-top: none
+  border-bottom: none
+  height: 100%
+  padding-top: 5px
   input
     +border-radius(20px)
     background: $search-bg url(image_path('search_icon.png')) no-repeat
     background-position: 95% center
+    background-size: 15px
     width: 100%
     color: $search-color
     border: 2px solid darken($search-bg, 10%)
@@ -76,4 +94,4 @@
   img
     vertical-align: middle
     width: 20px
-    height: 20px
+    height: 20px
diff --git a/app/assets/stylesheets/plugins/_attachments.sass b/app/assets/stylesheets/plugins/_attachments.sass
@@ -18,8 +18,11 @@
       text-decoration: none
       font-weight: bold
       color: #585D5F
+      &:hover
+        span
+          text-decoration: underline !important
 
-.action_bar
+.widget_action_bar
   form
     width: 100%
     height: 100%

diff --git a/app/assets/templates/chatarea.jst.eco b/app/assets/templates/chatarea.jst.eco
@@ -2,7 +2,7 @@
   <% for channel in @channels.models: %>
     <li>
       <a href="#<%= "channels-#{channel.get('id')}" %>"><%= channel.get('name') %></a>
-      <a href="#" class="ui-icon ui-icon-close">x</a>
+      <a href="#" class="close_channel" title="close channel">x</a>
     </li>
   <% end %>
   <li>