From c24d5193e45295451b73dfcc3b74c9d25f0f7ca7 Mon Sep 17 00:00:00 2001
From: flaburgan <flaburgan@geexxx.fr>
Date: Mon, 4 Nov 2013 01:43:06 -0800
Subject: [PATCH] Refactor conversations css + fix inconsistent height of
conversations list bug
---
app/assets/javascripts/inbox.js | 13 --
app/assets/stylesheets/application.css.sass | 207 +-----------------
app/assets/stylesheets/conversations.css.scss | 171 +++++++++++++++
app/views/conversations/index.haml | 9 +-
4 files changed, 176 insertions(+), 224 deletions(-)
create mode 100644 app/assets/stylesheets/conversations.css.scss
diff --git a/app/assets/javascripts/inbox.js b/app/assets/javascripts/inbox.js
index c1f367bdb2..965e21a1f9 100644
--- a/app/assets/javascripts/inbox.js
+++ b/app/assets/javascripts/inbox.js
@@ -60,11 +60,6 @@ $(document).ready(function(){
}
});
- resize();
- $(window).resize(function(){
- resize();
- });
-
$('#conversation_inbox .stream').infinitescroll({
navSelector : ".pagination",
// selector for the paged navigation (it will be hidden)
@@ -134,11 +129,3 @@ $(document).ready(function(){
})
});
});
-
-var resize = function(){
- var inboxSidebar = $('#conversation_inbox'),
- inboxSidebarOffset = inboxSidebar.offset().top,
- windowHeight = $(window).height();
-
- inboxSidebar.css('height', windowHeight - inboxSidebarOffset);
-};
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index ac25683a37..32b5862135 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -15,6 +15,7 @@
@import 'publisher'
@import 'facebox'
@import 'aspects'
+@import 'conversations'
/* ====== media ====== */
.media
@@ -1086,210 +1087,8 @@ ul#press_logos
iframe, .thumb img
:width 100%
-.conversation_participants
- :background
- :color $background-white
- :margin
- :bottom 10px
-
- :-webkit-box-shadow 0 2px 3px -3px #666
- :-moz-box-shadow 0 2px 3px -3px #666
- :box-shadow 0 2px 3px -3px #666
-
- a.close_conversation
- :display block
- :margin-top 20px
- :float right
-
- .icons-deletelabel
- :height 14px
- :width 14px
-
- h3
- :margin 0
- :top 6px
- :bottom 0px
- :padding
- :bottom 10px
-
- .avatar
- :height 30px
- :width 30px
-
- :line
- :height 0
-
- a img
- :margin
- :bottom 4px
-
- .conversation_controls
- a
- :margin
- :right 10px
-
- :margin
- :bottom 10px
-
- :border
- :bottom 1px solid $border-grey
- :padding 10px
- :top 101px
- :bottom 10px
- :width 560px
- :margin
- :top -100px
-
- .avatars
- :text
- :align right
- :margin
- :top 9px
-
-.conversation_participants
- a:hover
- :text-decoration none
-
-
-.stream_element.conversation
- :padding 8px
-
- .message_count
- @include border-radius(5px)
-
- :float right
- :right 0px
- :padding 0 5px
- :position relative
- :background
- :color #999
- :color #eee
- :font
- :size 12px
- :weight normal
-
- .unread_message_count
- @include border-radius(5px)
-
- :float right
- :right 5px
- :padding 0 5px
- :position relative
- :background
- :color #b11
- :color #eee
- :font
- :size 12px
- :weight normal
-
- .participant_count
- :font
- :weight normal
-
- .timestamp
- :position relative
- :float right
- :font
- :weight normal
- :color $blue
-
- .participants_link
- :margin-top 5px
- :clear right
- :float right
- :color #aaa
-
- .icons-users
- :display block
- :width 25px
- :height 16px
-
- .conversation_participants_popover_content
- :display none
-
- .conversation_participants_popover
- :margin 0 auto
- :padding-left 12px
-
- .avatar
- :display inline
- :width 35px
- :height 35px
- :margin
- :right 10px
- :bottom 10px
-
- .participants_left
- :display block
-
- &:hover:not(.selected)
- :background
- :color $highlight-white
-
- &.selected:hover
- :background
- :color lighten($blue,5%)
-
- &:hover
- :cursor pointer
-
-.conversation.unread
- :background
- :color darken($background-white,5%)
-
-.conversation.selected
- :background
- :color $blue
- .subject
- :color #fff
- .last_author
- :color #fff
- .timestamp
- :color #eee
- :border
- :bottom 1px solid darken($blue, 10%)
- :top 1px solid darken($blue, 10%)
-
-#conversation_inbox
- :height 100%
- :overflow-y auto
- :overflow-x none
-
- a:hover
- :text
- :decoration none
-
-#left_pane
- :position fixed
- :width 337px
-
- h3
- :padding
- :bottom 0
- :margin
- :bottom 15px
-
- #left_pane_header
- :padding 10px
- :height 55px
- :border
- :bottom 1px solid $border-grey
-
-#no_conversation_text
- :font
- :size 20px
- :weight bold
- :color #ccc
- :text
- :align center
- :margin
- :top 100px
-
-#no_conversation_controls
- :text
- :align center
- :font
- :size 12px
+#contact_visibility_padlock:hover
+ @include opacity(0.7)
.side_stream
.stream_element
diff --git a/app/assets/stylesheets/conversations.css.scss b/app/assets/stylesheets/conversations.css.scss
new file mode 100644
index 0000000000..1684976124
--- /dev/null
+++ b/app/assets/stylesheets/conversations.css.scss
@@ -0,0 +1,171 @@
+.conversation_participants {
+ box-shadow: 0 2px 3px -3px #666;
+ -webkit-box-shadow: 0 2px 3px -3px #666;
+ -moz-box-shadow: 0 2px 3px -3px #666;
+
+ background-color: $background-white;
+ margin-bottom: 10px;
+ border-bottom: 1px solid $border-grey;
+ padding: 10px;
+ padding-top: 0px;
+ width: 560px;
+ line-height: 0px;
+
+ a.close_conversation {
+ display: block;
+ margin-top: 5px;
+ float: right;
+
+ .icons-deletelabel {
+ height: 14px;
+ width: 14px;
+ }
+ }
+
+ h3 {
+ margin: 0px;
+ margin-top: 6px;
+ padding-bottom: 10px;
+ }
+
+ .avatar {
+ height: 30px;
+ width: 30px;
+ }
+
+ .avatars {
+ text-align: right;
+ margin-top: 9px;
+ }
+
+ a img { margin-bottom: 4px; }
+
+ .conversation_controls {
+ margin-bottom: 10px;
+
+ a { margin-right: 10px; }
+ }
+}
+
+.conversation_participants a:hover { text-decoration: none; }
+
+.stream_element.conversation {
+ padding: 8px;
+
+ .message_count, .unread_message_count {
+ @include border-radius(5px);
+ float: right;
+ right: 5px;
+ padding: 0px 5px;
+ position: relative;
+ color: $background-grey;
+ font-size: 12px;
+ font-weight: normal;
+ }
+
+ .message_count { background-color: #999; }
+ .unread_message_count { background-color: #b11; }
+ .participant_count { font-weight: normal; }
+
+ .timestamp {
+ position: relative;
+ float: right;
+ font-weight: normal;
+ color: $blue;
+ }
+
+ .participants_link {
+ margin-top: 5px;
+ clear: right;
+ float: right;
+ color: #aaa;
+ }
+
+ .icons-users {
+ display: block;
+ width: 25px;
+ height: 16px;
+ }
+
+ .conversation_participants_popover_content {
+ display: none;
+ }
+
+ .conversation_participants_popover {
+ margin: 0px auto;
+ padding-left: 12px;
+ }
+
+ .avatar {
+ display: inline;
+ width: 35px;
+ height: 35px;
+ margin-right: 10px;
+ margin-bottom: 10px;
+ }
+
+ .participants_left { display: block; }
+ &:hover:not(.selected) { background-color: $highlight-white; }
+ &.selected:hover { background-color: lighten($blue,5%); }
+ &:hover { cursor: pointer; }
+}
+
+.conversation.unread {
+ background-color: darken($background-white, 5%);
+}
+
+.conversation.selected {
+ background-color: $blue;
+
+ .subject,
+ .last_author {
+ color: $white;
+ }
+ .timestamp { color: $background-grey; }
+}
+
+#left_pane {
+ h3 {
+ padding-bottom: 0;
+ margin-bottom: 15px;
+ }
+
+ #left_pane_header {
+ position: fixed;
+ top: 50px;
+ width: 320px;
+ height: 40px;
+ padding: 10px;
+ border-bottom: 1px solid $border-grey;
+ }
+
+ #conversation_inbox {
+ position: fixed;
+ bottom: 0px;
+ top: 125px;
+ width: 350px;
+ overflow-y: auto;
+ overflow-x: none;
+
+ a:hover {
+ text-decoration: none;
+ }
+ }
+}
+
+#no_conversations,
+#no_conversation_text {
+ font-weight: bold;
+ color: #ccc;
+ text-align: center;
+ margin-top: 100px;
+}
+
+#no_conversation_text {
+ font-size: 20px;
+}
+
+#no_conversation_controls {
+ text-align: center;
+ font-size: 12px;
+}
diff --git a/app/views/conversations/index.haml b/app/views/conversations/index.haml
index c9fd40a432..115ffe2b0a 100644
--- a/app/views/conversations/index.haml
+++ b/app/views/conversations/index.haml
@@ -24,13 +24,8 @@
- if @conversations.count > 0
= render :partial => 'conversations/conversation', :collection => @conversations, :locals => {:authors => @authors, :unread_counts => @unread_counts}
- else
- %br
- %br
- %br
- %br
- %div{:style => 'text-align:center;'}
- %i
- = t('.no_messages')
+ #no_conversations
+ = t('.no_messages')
= will_paginate @conversations
--
GitLab