From b0a95cdcd7d0834a69fb9080cd7c4ed64bc72f03 Mon Sep 17 00:00:00 2001 From: Ben Halpern Date: Sat, 11 Apr 2020 10:56:52 -0400 Subject: [PATCH] [deploy] Small design and functionality touches to /connect (#7234) * Small design and functionality touches to /connect * Small fixes * Fix test * Fix test --- .../initializers/initNotifications.js | 4 + app/assets/stylesheets/chat.scss | 379 +++++------------- app/assets/stylesheets/top-bar.scss | 2 +- app/controllers/chat_channels_controller.rb | 2 +- .../__snapshots__/chat.test.jsx.snap | 29 +- app/javascript/chat/channels.jsx | 2 +- app/javascript/chat/chat.jsx | 19 +- app/javascript/packs/videoChat.jsx | 2 +- app/models/message.rb | 20 +- app/views/chat_channels/index.html.erb | 1 - app/views/video_chats/show.html.erb | 28 +- spec/models/message_spec.rb | 21 + 12 files changed, 199 insertions(+), 310 deletions(-) diff --git a/app/assets/javascripts/initializers/initNotifications.js b/app/assets/javascripts/initializers/initNotifications.js index 57f66a088..5691d1196 100644 --- a/app/assets/javascripts/initializers/initNotifications.js +++ b/app/assets/javascripts/initializers/initNotifications.js @@ -55,6 +55,10 @@ function fetchNotificationsCount() { document.getElementById('notifications-link').href, 'force', ); + InstantClick.preload( + document.getElementById('connect-link').href, + 'force', + ); }, 30); } } diff --git a/app/assets/stylesheets/chat.scss b/app/assets/stylesheets/chat.scss index 38cd3585a..379845ed5 100644 --- a/app/assets/stylesheets/chat.scss +++ b/app/assets/stylesheets/chat.scss @@ -9,7 +9,7 @@ } .live-chat { - height: calc(100vh - 80px); + height: calc(100vh - 70px); &.live-chat--iossafari { height: calc(100vh - 190px); @@ -18,14 +18,14 @@ overflow-y: hidden; @media screen and (min-width: 400px) { - height: calc(100vh - 80px); + height: calc(100vh - 70px); } } //chat .chat { display: flex; - height: calc(100vh - 91px); + height: calc(100vh - 80px); &.chat--iossafari { height: calc(100vh - 201px); @@ -34,7 +34,7 @@ padding-right: 3px; @media screen and (min-width: 400px) { - height: calc(100vh - 91px); + height: calc(100vh - 80px); } } @@ -76,11 +76,24 @@ height: inherit; position: relative; overflow: hidden; + + .chat__channelssearchtoggle { + background: transparent; + border: 0px; + margin-left: 2px; + svg { + vertical-align: -5px; + } + } + input { + outline: 0; + } + } .chat__channels--expanded { - width: 160px; - min-width: 160px; + width: 219px; + min-width: 183px; @media screen and (min-width: 1000px) { width: 200px; @@ -149,39 +162,16 @@ .chat__channeltypefilter { padding: 4px 0px 0px; - width: calc(100% - 13px); + width: calc(100% - 5px); } .chat__channeltypefilterbutton { - background: transparent; - border: 0px; - font-size: 15px; - font-weight: bold; - padding: 5px 15px; - display: block; - width: 100%; - box-sizing: border-box; - border-bottom: 1px solid darken($light-medium-gray, 5%); - + margin: 1px; @media screen and (min-width: 1300px) { - width: 33%; - display: inline-block; - border-top-left-radius: 3px; - border-top-right-radius: 3px; + margin: 5px 4px; } } -.chat__channeltypefilterbutton--active { - color: var(--link-branded-color); - - @media screen and (min-width: 1300px) { - border: 1px solid darken($light-medium-gray, 5%); - } -} - -.chat__channeltypefilterbutton--inactive { - @include themeable(color, theme-secondary-color, lighten($medium-gray, 5%)); -} .chat_chatconfig { position: absolute; @@ -220,185 +210,20 @@ } } -.chat__videocall { - height: calc(75vw - 60px); - width: calc(100% - 60px); - position: fixed; - background: $black; - left: 0px; - top: 0px; - text-align: center; - cursor: grab; - border-radius: 12px; - z-index: 10000; - - @media screen and (min-width: 640px) { - width: 640px; - height: 480px; - left: 250px; - top: 150px; - } - - &:active { - cursor: grabbing; - } - - video { - border-radius: 12px; - width: 100%; - height: 100%; - } - - .chat__remotevideoscreen-2 { - video { - margin-top: 20%; - width: 45%; - margin-left: 1%; - margin-right: 1%; - } - } - - .chat__remotevideoscreen-3, - .chat__remotevideoscreen-4 { - video { - width: 45%; - margin-top: 1%; - margin-left: 1%; - margin-right: 1%; - } - } - - .chat__remotevideoscreen-5, - .chat__remotevideoscreen-6 { - video { - width: 30%; - margin-top: 3%; - margin-left: 1%; - margin-right: 1%; - } - } - - .chat__remotevideoscreen-7, - .chat__remotevideoscreen-8 { - video { - width: 24%; - } - } - - .chat__localvideoscren { - height: 120px; - width: 160px; - position: absolute; - right: 15px; - bottom: 15px; - border-radius: 5px; - box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.4); - - video { - border-radius: 5px; - } - } -} - -.chatNonChatView { - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - padding: 80px 7%; - z-index: 10; - background: var(--body-bg); -} - -.chatNonChatView_exitbutton { - position: absolute; - left: 4%; - top: 60px; - font-size: 25px; - background: transparent; - border: 0px; - font-size: 1.8em; - color: var(--body-color); -} - -.chatNonChatView_contentblock { - border: 1px solid $medium-gray; - padding: 20px; - margin-bottom: 10px; - max-width: 900px; - @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow); - - h2 { - margin: 5px auto 5px; - } - - button { - font-size: 1.6em; - background: white; - border: 4px solid $black; - padding: 4px 12px; - border-radius: 3px; - margin: 20px 12px; - } -} - -.chat__videocallexitbutton { - border: 0px; - font-size: 20px; - color: $medium-gray; - padding: 1px 6px 2px; - border-radius: 6px; - background: rgba(0, 0, 0, 0.1); - position: absolute; - left: 3px; - top: 3px; -} - -.chat__videocallcontrolbutton { - border: 0px; - font-size: 14px; - color: $light-medium-gray; - padding: 3px 0px 4px; - border-radius: 6px; - background: rgba(0, 0, 0, 0.7); - position: absolute; - bottom: 10px; - left: 10px; - width: 125px; - - &.chat__videocallcontrolbutton--videoonoff { - left: 140px; - } -} - -.chat__videocalltrackdiv--audio { - display: none; -} - -.chat__videocalltrackdiv--video { - display: inline; -} - .activechatchannel { height: inherit; max-height: inherit; display: flex; flex-direction: row; justify-content: space-between; + border-radius: 5px; @include themeable(border, theme-container-border, 1px solid $outline-color); - @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow); background: var(--card-bg); flex-flow: row nowrap; } .activechatchannel__conversation { position: relative; - @include themeable( - border-top, - theme-container-border, - 1px solid $outline-color - ); order: 1; display: flex; flex-direction: column; @@ -406,7 +231,7 @@ width: 100%; min-width: 50%; @media screen and (min-width: 1440px) { - min-width: 55%; + min-width: 35%; } @media screen and (max-width: 426px) { overflow-x: hidden; @@ -421,12 +246,7 @@ ); padding: 10px 12px; font-weight: bold; - font-size: 14px; - @include themeable( - background, - theme-container-accent-background, - $light-gray - ); + font-size: 17px; position: relative; a { @@ -437,10 +257,9 @@ height: 17px; position: absolute; right: 15px; - top: 10px; + top: 12px; cursor: pointer; @include themeable(filter, theme-social-icon-invert, invert(0)); - img { height: 100%; } @@ -488,20 +307,11 @@ ); @include themeable(background, theme-container-accent-background, #ededed); width: 100%; - height: 60px; + height: 63px; position: relative; -} - -.activechatchannel__incomingcall { - border: 2px solid $green; - box-shadow: 6px 6px 0px $green; - padding: 20px; - margin: 10px; - background: lighten($green, 28%); - font-size: 28px; - font-weight: bold; - cursor: pointer; - animation: pulser 0.5s linear infinite; + @media screen and (min-height: 1000px) { + height: 85px; + } } .activechatchannel__activecontent { @@ -540,16 +350,14 @@ @media screen and (min-width: 1300px) { margin-left: initial; padding: 18px; - max-width: 620px; + width: 750px; + max-width: 750px; } } .chat--video-visible { .activechatchannel__conversation { - min-width: 25%; - @media screen and (min-width: 1440px) { - min-width: 45%; - } + min-width: 20%; } .activechatchannel__activecontent { &.activechatchannel__activecontent--video { @@ -576,16 +384,20 @@ width: 400px; min-width: 400px; } - @media screen and (min-width: 1300px) { - width: 500px; - min-width: 500px; + @media screen and (min-width: 1500px) { + width: 750px; + min-width: 750px; } } } +.chat--content-visible .activechatchannel__conversation { + max-width: 52%; +} + .chat--content-visible .activechatchannel__activecontent.activechatchannel__activecontent--video { - width: 280px; - min-width: 280px; + width: 180px; + min-width: 180px; } .live-chat-wrapper .activechatchannel__activecontent { @@ -715,16 +527,15 @@ width: calc(95% - 2px); border: none; background: transparent; - padding: 3px 0px; - margin-bottom: -5px 0; + padding: 2px 0px; + margin-bottom: -12px; box-sizing: border-box; color: var(--body-color); - - &:hover { - .chatchanneltab--inactive { - border: 1px solid $outline-color; - box-shadow: $bold-shadow; - } + display: block; + position: relative; + .crayons-indicator { + vertical-align: -1px; + margin-right: 4px; } } @@ -736,31 +547,28 @@ text-align: start; font-size: 11px; font-weight: 500; - padding: 6px 4px; - border: 1px solid transparent; + padding: 5px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; - - @media screen and (min-width: 550px) { - font-size: 13px; - padding: 8px; - } + border: 1px solid transparent; + font-size: 13px; + padding: 8px; } .chatchanneltab--active { - background: var(--card-bg); - border: 1px solid $dark-purple; - box-shadow: 3px 3px 0px $dark-purple; + border: 1px solid var(--base-30); } + .chatchanneltab--new { - background: lighten($yellow, 10%); - color: $black; + border: 1px solid var(--accent-brand); + color: var(--accent-brand-darker); } + .chatchanneltab--video { background: lighten($green, 10%); animation: small-pulser 0.5s linear infinite; @@ -771,19 +579,14 @@ min-height: 0.3em; min-width: 0.3em; border-radius: 100px; - margin-right: 3px; + margin-right: 5px; + border: 1px solid var(--base-30); img { - height: calc(20px + 0.3vw); - width: calc(20px + 0.3vw); - vertical-align: calc(-7px - 0.14vw); - border: 2px solid transparent; - - &.chatchanneltabindicatordirectimage { - border: 2px solid $light-medium-gray; - border-radius: 100px; - background: white; - } + height: calc(22px + 0.3vw); + width: calc(22px + 0.3vw); + vertical-align: calc(-6px - 0.14vw); + border-radius: 100px; } .chatchanneltabgroupicon { @@ -793,16 +596,7 @@ } .chatchanneltabindicator--new { - background: $yellow; - - img.chatchanneltabindicatordirectimage { - border: 2px solid $black; - } -} - -.chatchanneltabindicator--phone { - background: $green; - padding: 0px 8px; + border: 1px solid var(--accent-brand); } .chatchannels__channelslist { @@ -885,25 +679,24 @@ padding: 3px 10px; display: flex; max-width: 100%; - - &:hover { - @include themeable( - background, - theme-container-background-hover, - $light-gray - ); - - .chatmessagebody__username--link { + @media not all and (pointer: coarse) { + &:hover { @include themeable( background, theme-container-background-hover, - transparent + $light-gray ); + + .chatmessagebody__username--link { + @include themeable( + background, + theme-container-background-hover, + transparent + ); + } } } } -.chatmessage__profileimage { -} .chatmessage__body { flex-grow: 1; @@ -1021,20 +814,23 @@ .messagecomposer__input { border-radius: 3px; font-size: 16px; - margin: 4px 2px 4px 6px; + margin: 4px 4px 4px 6px; padding: 4px; resize: none; flex-grow: 1; - height: 42px; + height: 44px; background: var(--card-bg); @include themeable(border, theme-border, 1px solid $outline-color); color: var(--body-color); + @media screen and (min-height: 1000px) { + height: 66px; + } } .messagecomposer__submit { margin: 4px 6px 4px 0; border-radius: 3px; - background: $dark-purple; + background: var(--accent-brand); font-weight: 600px; font-family: $helvetica-condensed; color: white; @@ -1159,6 +955,11 @@ padding: 0px; margin-bottom: 6px; background: var(--card-bg); + &.chatchannels__richlink--base { + h1 { + margin: 18px auto; + } + } .chatchannels__richlinkmainimage { position: relative; width: 100%; @@ -1261,7 +1062,7 @@ background: white; padding: 0px 5px; border: 1px solid var(--header-bg); - border-left: 3px solid #4e57ef; + border-left: 3px solid var(--accent-brand); height: 50px; overflow: hidden; p { @@ -1274,13 +1075,13 @@ user-select: none; cursor: pointer; padding: 2px 5px; - color: #4e57ef; + color: var(--accent-brand); font-weight: bold; } .editHead { position: absolute; - color: #4e57ef; + color: var(--accent-brand); font-size: 14px; font-weight: bold; } diff --git a/app/assets/stylesheets/top-bar.scss b/app/assets/stylesheets/top-bar.scss index c266a1545..66ab61748 100644 --- a/app/assets/stylesheets/top-bar.scss +++ b/app/assets/stylesheets/top-bar.scss @@ -109,7 +109,7 @@ height: 100%; display: flex; align-items: center; - + z-index: 20; &__trigger { all: unset; padding: $su-1; diff --git a/app/controllers/chat_channels_controller.rb b/app/controllers/chat_channels_controller.rb index 1c4ccc313..9248ff9ee 100644 --- a/app/controllers/chat_channels_controller.rb +++ b/app/controllers/chat_channels_controller.rb @@ -20,7 +20,7 @@ class ChatChannelsController < ApplicationController end def show - @chat_messages = @chat_channel.messages.includes(:user).order("created_at DESC").offset(params[:message_offset]).limit(150) + @chat_messages = @chat_channel.messages.includes(:user).order("created_at DESC").offset(params[:message_offset]).limit(50) end def create diff --git a/app/javascript/chat/__tests__/__snapshots__/chat.test.jsx.snap b/app/javascript/chat/__tests__/__snapshots__/chat.test.jsx.snap index 9338555db..376a791e5 100644 --- a/app/javascript/chat/__tests__/__snapshots__/chat.test.jsx.snap +++ b/app/javascript/chat/__tests__/__snapshots__/chat.test.jsx.snap @@ -15,15 +15,30 @@ exports[` should load chat 1`] = ` > < -
+ ); diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx index e97a5c379..a7d609155 100644 --- a/app/javascript/chat/chat.jsx +++ b/app/javascript/chat/chat.jsx @@ -74,10 +74,12 @@ export default class Chat extends Component { startEditing: false, activeEditMessage: {}, markdownEdited: false, + searchShowing: false, channelUsers: [], showMemberlist: false, memberFilterQuery: null, }; + getAllMessages(chatOptions.activeChannelId, 0, this.receiveAllMessages); } componentDidMount() { @@ -89,6 +91,7 @@ export default class Chat extends Component { isMobileDevice, channelPaginationNum, currentUserId, + messageOffset, } = this.state; this.setupChannels(chatChannels); @@ -935,8 +938,8 @@ export default class Chat extends Component { ); + toggleSearchShowing = () => { + if (!this.state.searchShowing) { + setTimeout(function(){ + document.getElementById("chatchannelsearchbar").focus() + },100) + } + this.setState({searchShowing: !this.state.searchShowing}) + } + renderChatChannels = () => { const { state } = this; if (state.showChannelsList) { @@ -993,9 +1005,10 @@ export default class Chat extends Component { > {'<'} - + {state.searchShowing ? : ''} {invitesButton}
+ {this.renderChannelFilterButton( 'all', 'all', diff --git a/app/javascript/packs/videoChat.jsx b/app/javascript/packs/videoChat.jsx index 696cf4e3a..372f2d670 100644 --- a/app/javascript/packs/videoChat.jsx +++ b/app/javascript/packs/videoChat.jsx @@ -51,7 +51,7 @@ connect(root.dataset.token, { name: 'room-name', audio: true, type: roomType, vi createLocalVideoTrack().then(track => { localMediaContainer.appendChild(track.attach()); - + document.getElementById('video-controls').classList.add('showing'); }); diff --git a/app/models/message.rb b/app/models/message.rb index 7a123d31e..e346f5c61 100644 --- a/app/models/message.rb +++ b/app/models/message.rb @@ -40,6 +40,7 @@ class Message < ApplicationRecord def evaluate_markdown html = MarkdownParser.new(message_markdown).evaluate_markdown + html = target_blank_links(html) html = append_rich_links(html) html = wrap_mentions_with_links(html) html = handle_call(html) @@ -90,6 +91,13 @@ class Message < ApplicationRecord end end + def target_blank_links(html) + return html if html.blank? + + html = html.gsub(" ".html_safe + elsif anchor["href"].include?("https://www.figma.com/file/") # Proof of concept + html += " +

Figma File

+ ".html_safe + elsif anchor["href"].starts_with?("https://docs.google.com/") # Proof of concept + html += " +

Google Docs

+ ".html_safe end end html @@ -128,9 +144,9 @@ class Message < ApplicationRecord return html if html.to_s.exclude?("

/call

") " -

+

Let's video chat 😄

".html_safe diff --git a/app/views/chat_channels/index.html.erb b/app/views/chat_channels/index.html.erb index 19ca3c730..4bb695654 100644 --- a/app/views/chat_channels/index.html.erb +++ b/app/views/chat_channels/index.html.erb @@ -19,7 +19,6 @@
-
diff --git a/app/views/video_chats/show.html.erb b/app/views/video_chats/show.html.erb index 9530dae33..8fc9b72bd 100644 --- a/app/views/video_chats/show.html.erb +++ b/app/views/video_chats/show.html.erb @@ -6,7 +6,6 @@ .video-chat-wrapper { position: relative; height: 100vh; - background: #171717; overflow: scroll; } .individual-video video { @@ -18,10 +17,14 @@ .individual-video { overflow: hidden; } + .individual-video:last-child { + margin-bottom: 100px; + } + #local-media video { width: 150px; - position: absolute; + position: fixed; bottom: 10px; right: 10px; z-index: 5; @@ -54,10 +57,16 @@ margin: 8px; } .video-controls { - position: absolute; + position: fixed; bottom: 15px; left: 5px; width: calc(100% - 175px); + z-index: 10; + display: none; + } + + .showing { + display: block; } .video-controls button { @@ -95,13 +104,24 @@ color: white; margin-top: 30px; } + + @media screen and (max-width: 280px) { + .video-controls { + width: 92%; + bottom: 5px; + } + #local-media video { + width: 90%; + bottom: 85px; + } + }
-
+
diff --git a/spec/models/message_spec.rb b/spec/models/message_spec.rb index 94f89f5c0..8b32c03fb 100644 --- a/spec/models/message_spec.rb +++ b/spec/models/message_spec.rb @@ -50,6 +50,13 @@ RSpec.describe Message, type: :model do expect(message.message_html).to include("sidecar-article") end + it "creates target blank link" do + message.message_markdown = "hello http://#{ApplicationConfig['APP_DOMAIN']}#{user.path}" + message.validate! + + expect(message.message_html).to include("