diff --git a/source/images/messaging/example-user1.jpg b/source/images/messaging/example-user1.jpg new file mode 100644 index 0000000..beaed14 Binary files /dev/null and b/source/images/messaging/example-user1.jpg differ diff --git a/source/images/messaging/example-user2.jpg b/source/images/messaging/example-user2.jpg new file mode 100644 index 0000000..b2f797d Binary files /dev/null and b/source/images/messaging/example-user2.jpg differ diff --git a/source/images/messaging/example-user3.jpg b/source/images/messaging/example-user3.jpg new file mode 100644 index 0000000..fcd6ccb Binary files /dev/null and b/source/images/messaging/example-user3.jpg differ diff --git a/source/images/messaging/example-user4.jpg b/source/images/messaging/example-user4.jpg new file mode 100644 index 0000000..9c9199b Binary files /dev/null and b/source/images/messaging/example-user4.jpg differ diff --git a/source/images/messaging/example-user5.jpg b/source/images/messaging/example-user5.jpg new file mode 100644 index 0000000..e6aa15c Binary files /dev/null and b/source/images/messaging/example-user5.jpg differ diff --git a/source/images/messaging/example-user6.jpg b/source/images/messaging/example-user6.jpg new file mode 100644 index 0000000..e4df658 Binary files /dev/null and b/source/images/messaging/example-user6.jpg differ diff --git a/source/index.html.erb b/source/index.html.erb index d917cb0..cc6dab2 100644 --- a/source/index.html.erb +++ b/source/index.html.erb @@ -19,6 +19,7 @@ body: home

Example pages

diff --git a/source/javascripts/body/messaging_filter.js b/source/javascripts/body/messaging_filter.js new file mode 100644 index 0000000..6e402b0 --- /dev/null +++ b/source/javascripts/body/messaging_filter.js @@ -0,0 +1,20 @@ +(function () { + 'use strict'; + + if ( $('.messaging-page').length ) { + $('#message-search').keyup(function(){ + var search = $(this).val().toLowerCase(); + var $elements = $('.message') + + if(search){ + $elements.each(function(){ + var text = $(this).text().toLowerCase(); + (text.indexOf(search) >= 0) ? $(this).show() : $(this).hide(); + }); + }else{ + $elements.show(); + } + }); + } + +})(); \ No newline at end of file diff --git a/source/javascripts/body/messaging_open_chat.js b/source/javascripts/body/messaging_open_chat.js new file mode 100644 index 0000000..221cfb3 --- /dev/null +++ b/source/javascripts/body/messaging_open_chat.js @@ -0,0 +1,17 @@ +(function () { + 'use strict'; + + if ( $('.messaging-page').length ) { + $('.message').on('click', function(e) { + e.preventDefault(); + $('.chat-container').addClass('active'); + $('.message').removeClass('active') + $(this).addClass('active') + }); + $('.btn-back-to-messages').on('click', function(e) { + e.preventDefault(); + $('.chat-container').removeClass('active'); + }); + } + +})(); \ No newline at end of file diff --git a/source/javascripts/head.js b/source/javascripts/head.js index a3883d0..dfdf0fa 100644 --- a/source/javascripts/head.js +++ b/source/javascripts/head.js @@ -1 +1,2 @@ -//= require modernizr \ No newline at end of file +//= require modernizr +//= require_tree ./head \ No newline at end of file diff --git a/source/javascripts/head/messaging_scroll.js b/source/javascripts/head/messaging_scroll.js new file mode 100644 index 0000000..ed478ef --- /dev/null +++ b/source/javascripts/head/messaging_scroll.js @@ -0,0 +1,20 @@ +(function () { + 'use strict'; + + $(document).on('ready',function(){ + if ( $('.messaging-page').length ) { + $(".chat-container > .content").mCustomScrollbar({ + axis: 'y', + theme:"minimal-dark", + setTop: $(".chat-container > .content > .wrapper").height() + 'px', + advanced:{ + autoUpdateTimeout: 0, + scrollInertia: 100, + updateOnImageLoad: true, + updateOnContentResize: true + } + }); + } + }); + +})(); diff --git a/source/messaging/index.html.erb b/source/messaging/index.html.erb new file mode 100644 index 0000000..c90e689 --- /dev/null +++ b/source/messaging/index.html.erb @@ -0,0 +1,11 @@ +--- +title: Messaging +messaging_user_link: /profile +subscription: true +empty: true +--- + +
+ <%= partial "partials/messaging/message-list" %> + <%= partial "partials/messaging/chat-container" %> +
\ No newline at end of file diff --git a/source/partials/messaging/_chat-container.html.erb b/source/partials/messaging/_chat-container.html.erb new file mode 100644 index 0000000..8df5969 --- /dev/null +++ b/source/partials/messaging/_chat-container.html.erb @@ -0,0 +1,82 @@ +
+
+

+ + Back + + + <% if current_page.data.messaging_title_link %> + + ORDER #12412 + + <% end %> + + <%= lorem.name %> + +

+ <% if current_page.data.messaging_attachment %> +
+ + +
+ <% end %> +
+
+
+ <% if current_page.data.empty == true %> + + <% else %> + <% if current_page.data.messaging_attachment %> + <%= partial "partials/messaging/chat-message-attachment", + :locals => { + :align => 'left' + } %> + <%= partial "partials/messaging/chat-message-attachment", + :locals => { + :align => 'right', + :type => 'image', + :url => 'example1.jpg' + } %> + <% end %> + <% for i in 1..rand(2..4) %> + <%= partial "partials/messaging/chat-message" %> + <% end %> +
+ +
+ <% for i in 1..rand(2..6) %> + <%= partial "partials/messaging/chat-message" %> + <% end %> +
+ +
+ <% for i in 1..rand(2..6) %> + <%= partial "partials/messaging/chat-message" %> + <% end %> +
+ +
+ <% for i in 1..rand(2..6) %> + <%= partial "partials/messaging/chat-message" %> + <% end %> +
+ +
+ <% end %> +
+
+
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/source/partials/messaging/_chat-message-attachment.html.erb b/source/partials/messaging/_chat-message-attachment.html.erb new file mode 100644 index 0000000..a1da2af --- /dev/null +++ b/source/partials/messaging/_chat-message-attachment.html.erb @@ -0,0 +1,21 @@ +<% attachment = defined?(type) ? type : 'file' %> +<% file_url = defined?(url) ? url : false %> +<% message_align = defined?(align) ? align : ['right','left'].sample %> + +
+ " + target="_blank"> +
+
+ <% if attachment == "image" && file_url %> + <%= image_tag file_url %> + <% else %> + + <% end %> +
+
+ Exemple-file-name.ext +
+
+ +
\ No newline at end of file diff --git a/source/partials/messaging/_chat-message.html.erb b/source/partials/messaging/_chat-message.html.erb new file mode 100644 index 0000000..53c8373 --- /dev/null +++ b/source/partials/messaging/_chat-message.html.erb @@ -0,0 +1,5 @@ +
+
+ <%= lorem.sentence %> +
+
\ No newline at end of file diff --git a/source/partials/messaging/_message-list-message.html.erb b/source/partials/messaging/_message-list-message.html.erb new file mode 100644 index 0000000..d3f568b --- /dev/null +++ b/source/partials/messaging/_message-list-message.html.erb @@ -0,0 +1,29 @@ +<% unread_message = defined?(unread) ? unread : false %> +<% active_message = defined?(active) ? 'active' : false %> +<% date_message = defined?(date) ? date : "#{rand(1...30)}/#{rand(1...12)}/2016" %> + +
+ <%= image_tag "messaging/example-user#{rand(1...6)}.jpg" %> +
+
+
+ <%= date_message %> +
+ <% if current_page.data.message_title %> +
+ <%= ["Order ##{rand(0..10000)}",'CONVERSATION'].sample %> +
+ <% end %> +
+ <%= lorem.name %> +
+ <% if unread_message %> +
+ <%= unread_message %> +
+ <% end %> +
+ <%= lorem.sentence %> +
+
+ \ No newline at end of file diff --git a/source/partials/messaging/_message-list.html.erb b/source/partials/messaging/_message-list.html.erb new file mode 100644 index 0000000..1a8fb85 --- /dev/null +++ b/source/partials/messaging/_message-list.html.erb @@ -0,0 +1,32 @@ +
+
+

Messages

+ +
+
+ <%= partial 'partials/messaging/message-list-message', + :locals => { + :active => true, + :unread => 10, + :date => '00:10', + } + %> + + <%= partial 'partials/messaging/message-list-message', + :locals => { + :unread => 3, + :date => '23:10', + } + %> + + <%= partial 'partials/messaging/message-list-message', + :locals => { + :date => 'Yesterday', + } + %> + + <% for i in (0..5) %> + <%= partial 'partials/messaging/message-list-message' %> + <% end %> +
+
\ No newline at end of file diff --git a/source/stylesheets/application.css.scss b/source/stylesheets/application.css.scss index 233a040..9884ee6 100644 --- a/source/stylesheets/application.css.scss +++ b/source/stylesheets/application.css.scss @@ -27,6 +27,7 @@ @import 'blocks/hero'; @import 'blocks/list-tabulated'; @import 'blocks/main-content'; +@import 'blocks/messaging'; @import 'blocks/modals'; @import 'blocks/nav-inline'; @import 'blocks/nav-pills'; diff --git a/source/stylesheets/blocks/_messaging.scss b/source/stylesheets/blocks/_messaging.scss new file mode 100644 index 0000000..dfa5b41 --- /dev/null +++ b/source/stylesheets/blocks/_messaging.scss @@ -0,0 +1,598 @@ +// Messaging + +$messaging-break: 768px !default; +$messaging-desktop: 1200px !default; +$messaging-background: #F3F9FF !default; +$messaging-primary: $primary !default; +$messaging-secondary: lightgrey !default; +$messaging-page-background: white !default; +$messaging-z-index: 0 !default; + +$messaging-header-break: 480px !default; +$messaging-header-height: 72px !default; +$messaging-header-height-mq: 82px !default; +$messaging-header-border: 1px solid $messaging-secondary !default; +$messaging-header-font-size: 18px !default; +$messaging-header-before-user: "·" !default; +$messaging-header-padding: 10px !default; +$messaging-header-padding-mq: 20px 20px !default; +$messaging-header-user-font-family: $font-family-base !default; +$messaging-header-user-font-width: 200 !default; +$messaging-header-attachment-size: 24px !default; + +$messaging-message-search-font-size: 14px !default; +$messaging-message-search-padding: 3px 0 !default; +$messaging-message-search-placeholder: #999 !default; +$messaging-message-search-color: #555 !default; +$messaging-message-search-focus-background: transparent !default; +$messaging-message-search-background: transparent !default; +$messaging-message-search-width: 110px !default; + +$message-list-font-size: 14px !default; +$message-list-width: 33% !default; +$message-list-border-right: 1px solid $messaging-secondary !default; +$message-list-header-height: 40px !default; + +$message-list-message-padding: 20px 40px 20px 20px !default; +$message-list-message-padding-mq: 20px !default; +$message-list-message-border-bottom: 1px solid #EEEEEE !default; +$message-list-message-hover: #F6F6F6 !default; +$message-list-message-active: lighten($messaging-primary, 40%) !default; +$message-list-message-image-width: 50px !default; +$message-list-message-color: #333333 !default; +$message-list-message-badge-background: $messaging-primary !default; +$message-list-message-content-padding-right: 10px !default; +$message-list-message-data-color: gray !default; +$message-list-message-badge-width: 50px !default; +$message-list-message-data-width: 80px !default; + +$chat-container-background: white !default; +$chat-container-calc: 110px !default; +$chat-container-calc-mq: 128px !default; +$chat-container-content-padding: 10px !default; +$chat-container-content-margin-top: 10px !default; + +$chat-message-width: 80% !default; +$chat-message-width-mq: 70% !default; + +$chat-message-margin: 10px 10px 20px !default; + +$chat-message-text-wrapper-margin-top: 3px !default; +$chat-message-text-margin: 10px !default; +$chat-message-text-right-background-color: $messaging-primary !default; +$chat-message-text-right-color: white !default; +$chat-message-text-left-background-color: $messaging-secondary !default; +$chat-message-text-left-color: black !default; +$chat-message-text-border-radius: 5px !default; +$chat-message-text-arrow-size: 5px !default; +$chat-message-text-padding: 10px !default; +$chat-message-text-padding-mq: 10px !default; +$chat-message-text-font-size: 14px !default; + +$chat-message-attachment-image-size: 100px !default; +$chat-message-attachment-image-padding-right: 10px !default; + +$chat-message-time-color: $messaging-primary !default; +$chat-message-time-unread: #d9534f !default; +$chat-message-time-font-size: 12px !default; + +$messaging-footer-input-border: 1px solid $messaging-secondary !default; +$messaging-footer-input-padding: 10px !default; +$messaging-footer-input-padding-mq: 10px 10px 10px 20px !default; +$messaging-footer-input-placeholder-color: $messaging-message-search-placeholder !default; +$messaging-footer-input-color: $messaging-message-search-color; +$messaging-footer-btn-height: 44px !default; + +.messaging { + background: $messaging-background; + height: 100vh; + position: relative; + margin: 0; + + .footer { + display: none; + } +} + +.messaging-page { + position: relative; + height: calc(100% - #{$messaging-header-height}); + overflow: hidden; + background: $messaging-page-background; + + @extend .container; + + padding: 0; + + @media (min-width: $messaging-header-break) { + height: calc(100% - #{$messaging-header-height-mq}); + } +} + +.messaging-header { + margin: 0; + padding: $messaging-header-padding; + border-bottom: $messaging-header-border; + + @media (min-width: $messaging-break) { + padding: $messaging-header-padding-mq; + } + + .title { + display: inline-block; + margin: 0; + font-size: $messaging-header-font-size; + + .message-title + .message-user { + font-weight: $messaging-header-user-font-width; + font-family: $messaging-header-user-font-family; + + &:before { + content: $messaging-header-before-user; + } + } + + a { + color: inherit; + text-decoration: none; + + &:hover { + color: $messaging-primary; + } + } + } + + .attachment { + cursor: pointer; + position: relative; + overflow: hidden; + float: right; + margin: 0; + top: -5px; + padding-left: 10px; + font-size: $messaging-header-attachment-size; + + &:hover { + color: $messaging-primary; + } + + .icon { + @extend .fa; + + @extend .fa-paperclip; + } + + .upload { + position: absolute; + top: 0; + right: 0; + margin: 0; + padding: 0; + font-size: $messaging-header-attachment-size; + cursor: pointer; + opacity: 0; + } + } + + #message-search { + float: right; + font-size: $messaging-message-search-font-size; + padding: $messaging-message-search-padding; + color: $messaging-message-search-color; + background-color: $messaging-message-search-background; + border: 0; + width: $messaging-message-search-width; + text-align: right; + outline: 0; + + &:focus { + background-color: $messaging-message-search-focus-background; + color: $messaging-message-search-color; + } + } + + .btn-back-to-messages { + padding-right: 6px; + + @media (min-width: $messaging-break) { + display: none; + } + + } +} + +.message-list { + background: white; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-overflow-scrolling: touch; + + @media (min-width: $messaging-break) { + display: block; + position: relative; + top: auto; + left: auto; + float: left; + width: $message-list-width; + border-right: $message-list-border-right; + } + + .content { + height: calc(100% - #{$message-list-header-height}); + overflow-x: hidden; + overflow-y: scroll; + } + + .message { + display: block; + width: 100%; + padding: $message-list-message-padding; + border-bottom: $message-list-message-border-bottom; + color: $message-list-message-color; + + @media (min-width: $messaging-break) { + padding: $message-list-message-padding-mq; + } + + &:hover, + &:focus { + text-decoration: none; + background-color: $message-list-message-hover; + } + + &.active { + background-color: $message-list-message-active; + } + } + + .message-image { + width: $message-list-message-image-width; + float: left; + + img { + border-radius: 50%; + } + } + + .message-content { + position: relative; + margin-left: $message-list-message-image-width; + padding-left: $message-list-message-content-padding-right; + + @media (min-width: $messaging-break) { + &:after { + display: none; + } + } + + &:after { + @extend .fa; + + content: ""; + position: absolute; + right: -30px; + top: 50%; + font-size: 50px; + transform: translateY(-50%); + opacity: 0.05; + z-index: $messaging-z-index + 9; + + @media (min-width: $messaging-break) { + display: none; + } + + } + + .badge { + float: right; + background-color: $message-list-message-badge-background; + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: 14px; + font-weight: bold; + color: #fff; + line-height: 1; + vertical-align: baseline; + white-space: nowrap; + text-align: center; + border-radius: 10px; + } + } + + .message-user { + font-weight: bold; + width: calc(100% - #{$message-list-message-data-width}); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 10px; + } + + .message-title { + font-weight: bold; + width: calc(100% - #{$message-list-message-data-width}); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + & + .message-user { + font-weight: normal; + margin-bottom: 0; + width: 100%; + } + + & + .message-text { + margin-top: 10px; + } + } + + .message-text { + font-size: $message-list-font-size; + width: calc(100% - #{$message-list-message-badge-width}); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .message-date { + float: right; + font-size: $message-list-font-size; + color: $message-list-message-data-color; + } +} + +.chat-container { + background: $chat-container-background; + position: absolute; + top: 0; + left: 100%; + width: 100%; + transition: left 0.5s; + height: 100%; + overflow: hidden; + z-index: $messaging-z-index + 10; + + @media (min-width: $messaging-break) { + display: block; + position: relative; + top: auto; + left: auto; + width: 100% - $message-list-width; + float: left; + left: 0; + overflow: hidden; + } + + &.active { + left: 0; + } + + .content { + height: calc(100% - #{$chat-container-calc}); + overflow: auto; + width: 100%; + -webkit-overflow-scrolling: touch; + + @media (min-width: $messaging-break) { + padding: $chat-container-content-padding; + height: calc(100% - #{$chat-container-calc-mq}); + } + + .wrapper { + display: flex; + flex-direction: column-reverse; + } + } +} + +.chat-message { + position: relative; + margin: $chat-message-margin; + font-size: $chat-message-text-font-size; + + &.left { + text-align: left; + + & + .left { + margin-bottom: 0; + + &:after { + content: none; + } + } + + &:after { + content: ""; + position: absolute; + left: -$chat-message-text-arrow-size; + bottom: 50%; + transform: translateY($chat-message-text-arrow-size); + width: 0; + height: 0; + border-top: $chat-message-text-arrow-size solid transparent; + border-bottom: $chat-message-text-arrow-size solid transparent; + border-right: $chat-message-text-arrow-size solid $chat-message-text-left-background-color; + } + + .chat-message-content { + background-color: $chat-message-text-left-background-color; + color: $chat-message-text-left-color; + } + } + + &.right { + text-align: right; + + & + .right { + margin-bottom: 0; + + &:after { + content: none; + } + } + + &:after { + content: ""; + position: absolute; + right: -$chat-message-text-arrow-size; + bottom: 50%; + transform: translateY($chat-message-text-arrow-size); + width: 0; + height: 0; + border-top: $chat-message-text-arrow-size solid transparent; + border-bottom: $chat-message-text-arrow-size solid transparent; + border-left: $chat-message-text-arrow-size solid $chat-message-text-right-background-color; + } + + .chat-message-content { + background-color: $chat-message-text-right-background-color; + color: $chat-message-text-right-color; + } + } + + .chat-message-content { + display: inline-block; + padding: $chat-message-text-padding; + border-radius: $chat-message-text-border-radius; + max-width: $chat-message-width; + + @media (min-width: $messaging-desktop) { + max-width: $chat-message-width-mq; + } + + } + + &.attachment { + &:hover { + opacity: 0.8; + } + + .chat-message-content { + padding: 0; + text-decoration: none; + } + + .content { + padding: $chat-message-text-padding; + display: table; + + .preview { + display: table-cell; + vertical-align: middle; + padding-right: $chat-message-attachment-image-padding-right; + + img { + max-width: $chat-message-attachment-image-size; + max-height: $chat-message-attachment-image-size; + height: auto; + } + + .icon { + font-size: 50px; + opacity: 0.4; + + @extend .fa; + } + } + + .text { + display: table-cell; + vertical-align: middle; + font-weight: bold; + padding-right: $chat-message-attachment-image-padding-right; + } + } + + &.file { + .preview .icon { + @extend .fa-file-o; + } + } + } +} + +.chat-message-time { + color: $chat-message-time-color; + font-size: $chat-message-time-font-size; + + @include gradient-horizontal-three-colors($messaging-primary, $messaging-page-background, 50%, $messaging-primary); + + text-align: center; + margin: 30px 10px; + height: 1px; + + time { + display: inline-block; + position: relative; + bottom: 0; + transform: translateY(-50%); + color: $chat-message-time-color; + background-color: $messaging-page-background; + padding: 0 ($chat-message-time-font-size * 2); + text-transform: uppercase; + font-weight: bold; + } + + &.unread { + @include gradient-horizontal-three-colors($chat-message-time-unread, $messaging-page-background, 50%, $chat-message-time-unread); + + time { + color: $chat-message-time-unread; + } + } +} + +.messaging-footer-input { + display: table; + padding: $messaging-footer-input-padding; + width: 100%; + border-top: $messaging-footer-input-border; + + @media (min-width: $messaging-break) { + padding: $messaging-footer-input-padding-mq; + } + + .input-wrapper { + display: table-cell; + width: 100%; + vertical-align: top; + + .form-control{ + box-shadow: none; + display: block; + width: 100%; + height: 44px; + padding: 10px 20px; + font-size: 16px; + line-height: 1.42857; + color: #555555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 0; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + } + + input { + color: $messaging-footer-input-color; + width: 100%; + border-right: 0; + + } + } + + .buttons-wrapper { + display: table-cell; + vertical-align: top; + + .btn { + height: $messaging-footer-btn-height; + } + } +} diff --git a/source/stylesheets/utilities/_helpers.scss b/source/stylesheets/utilities/_helpers.scss index c304466..37cadef 100644 --- a/source/stylesheets/utilities/_helpers.scss +++ b/source/stylesheets/utilities/_helpers.scss @@ -22,6 +22,14 @@ text-overflow: ellipsis; } +@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { + background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); + background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); + background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback +} + // Helpers .sr-only { diff --git a/source/stylesheets/utilities/_variables.scss b/source/stylesheets/utilities/_variables.scss index 4ede8d4..5c0d1d6 100644 --- a/source/stylesheets/utilities/_variables.scss +++ b/source/stylesheets/utilities/_variables.scss @@ -19,4 +19,4 @@ $header-height-breakpoint: 5rem; $nav-responsive-width: 26rem; $border-radius: 3px; -$shadow: 0 2px 4px rgba(black, .08); +$shadow: 0 2px 4px rgba(black, .08); \ No newline at end of file