diff --git a/app/assets/images/organization.svg b/app/assets/images/organization.svg new file mode 100644 index 000000000..84d89f0cd --- /dev/null +++ b/app/assets/images/organization.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/stylesheets/chat.scss b/app/assets/stylesheets/chat.scss index adb63e88f..4db9998d3 100644 --- a/app/assets/stylesheets/chat.scss +++ b/app/assets/stylesheets/chat.scss @@ -2,36 +2,25 @@ // High level classes .chat-page-wrapper{ - margin: 100px auto 0px; + margin: 85px auto 0px; width: 96%; - max-width: 1440px; + max-width: calc(1440px + 10vw); } .live-chat{ - height: calc(100vh - 220px); + height: calc(100vh - 190px); overflow-y: hidden; @media screen and ( min-width: 400px ){ - height: calc(100vh - 121px); + height: calc(100vh - 80px); } } -.chat-page-header{ - background: $green; - text-align: center; - padding: 5px; - margin-top: -25px; - border-radius: 3px; - margin-bottom: 5px; - font-size:0.8em; - font-weight: bold; -} - //chat .chat { display: flex; - height: calc(100vh - 227px); + height: calc(100vh - 201px); padding-right: 3px; @media screen and ( min-width: 400px ){ - height: calc(100vh - 128px); + height: calc(100vh - 91px); } } @@ -79,7 +68,18 @@ } } @media screen and ( min-width: 1300px ){ - width: 280px; + width: calc(280px + 3vw); + } + &.chat__channels--placeholder{ + @media screen and ( max-width: 599px ){ + width: 45px; + input{ + display: none; + } + .chat__channelstogglebutt{ + visibility: hidden; + } + } } } @@ -108,14 +108,14 @@ } .chat__channeltypefilter{ - padding: 3px 0px 3px; + padding: 4px 0px 4px; } .chat__channeltypefilterbutton{ background: transparent; border: 0px; - font-size: 14px; - padding: 4px 8px 2px; + font-size: 15px; + padding: 9px 15px 4px; font-family: $monospace; border-top-left-radius: 3px; border-top-right-radius: 3px; @@ -237,6 +237,26 @@ font-size:25px; background: white; border:0px; + font-size:1.8em; +} + +.chatNonChatView_contentblock{ + border: 1px solid $medium-gray; + padding: 20px; + margin-bottom: 10px; + max-width: 900px; + 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{ @@ -342,9 +362,10 @@ } .activechatchannel__activecontent{ + border: 1px solid $outline-color; border-left: 2px solid $outline-color; padding: 13px; - min-width: 290px; + min-width: 310px; margin-left: -180px; background: white; flex-basis: 80%; @@ -352,6 +373,7 @@ position: relative; box-sizing: border-box; overflow-y: scroll; + max-width:96%; @media screen and ( min-width: 1000px ){ margin-left: initial; min-width: 0px; @@ -374,15 +396,44 @@ background: transparent; position: absolute; left: 6px; - top:-4px; + top:-5px; } .activechatchannel__activeArticle{ position: absolute; - top: 38px; left: 0; right: 0; bottom: 0; + top: 36px; left: 0; right: 0; bottom: 0; border-top: 1px solid $light-medium-gray !important; } +.activechatchannel__activeArticleDetails{ + position: absolute; + top: -25px; + right: 2px; + left: 42px; + font-family: $monospace; + font-size:0.85em; + a{ + color: $dark-gray; + } + .activechatchannel__activeArticleDetailsPath{ + display: inline-block; + max-width: calc(100% - 20px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + img{ + height: 1.1em; + width: 1.1em; + margin-left: 10px; + vertical-align:2px; + opacity:0.86; + &:hover{ + opacity:1; + } + } +} + .chat .activechatchannel__activeArticle .container { position: absolute; top: 0px; left: 0; right: 0; bottom: 30px; @@ -493,7 +544,7 @@ text-align: start; font-size: 11px; font-weight: 500; - padding: 3px; + padding: 6px 4px; border: 1px solid transparent; border-radius: 3px; white-space: nowrap; @@ -517,27 +568,31 @@ .chatchanneltabindicator{ display: inline-block; - background: $light-medium-gray; - border: 2px solid $light-medium-gray; min-height: 0.3em; min-width: 0.3em; border-radius: 100px; // vertical-align: -0.05em; margin-right: 3px; img { - height: 20px; - width: 20px; - border-radius: 100px; - vertical-align: -7px; - border: 3px solid $light-medium-gray; + 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; + } + } + .chatchanneltabgroupicon{ + display: inline-block; + margin-left: calc(20px + 0.3vw); } } .chatchanneltabindicator--new{ background: $yellow; - border: 2px solid $black; - img { - border: 3px solid $yellow; + img.chatchanneltabindicatordirectimage { + border: 2px solid $black; } } diff --git a/app/javascript/chat/article.jsx b/app/javascript/chat/article.jsx index 9fd04693d..e27c2260d 100644 --- a/app/javascript/chat/article.jsx +++ b/app/javascript/chat/article.jsx @@ -4,6 +4,7 @@ import { h, Component } from 'preact'; import heartImage from 'images/emoji/emoji-one-heart.png'; import unicornImage from 'images/emoji/emoji-one-unicorn.png'; import bookmarkImage from 'images/emoji/emoji-one-bookmark.png'; +import openLink from 'images/external-link-logo.svg'; export default class Article extends Component { constructor(props) { @@ -103,14 +104,21 @@ export default class Article extends Component { } return (
+
+ + {article.path} + + +
{coverImage}

{article.title}

- {article.user.username}/ - {article.user.name} + {article.user.username}/ + {article.user.name} + | {article.readable_publish_date}

diff --git a/app/javascript/chat/channelDetails.jsx b/app/javascript/chat/channelDetails.jsx index c9d7eb7b3..51fe6a7d4 100644 --- a/app/javascript/chat/channelDetails.jsx +++ b/app/javascript/chat/channelDetails.jsx @@ -107,6 +107,9 @@ export default class ChannelDetails extends Component { return

{channel.channel_name}

{subHeader} +
+ {channel.description || ''} +
{users} {modSection}
diff --git a/app/javascript/chat/channels.jsx b/app/javascript/chat/channels.jsx index 4c632e4aa..5f91d0b76 100644 --- a/app/javascript/chat/channels.jsx +++ b/app/javascript/chat/channels.jsx @@ -1,6 +1,7 @@ import { h } from 'preact'; import PropTypes from 'prop-types'; import ConfigImage from 'images/three-dots.svg'; +import GroupImage from 'images/organization.svg'; const Channels = ({ activeChannelId, chatChannels, @@ -29,7 +30,7 @@ const Channels = ({ activeChannelId, const name = channel.channel_type === "direct" ? '@'+channel.slug.replace(`${window.currentUser.username}/`, '').replace(`/${window.currentUser.username}`, '') : channel.channel_name const newMessagesIndicatorClass = isUnopened ? "new" : "old" const modififedSlug = channel.channel_type === "direct" ? name : channel.slug; - const indicatorPic = channel.channel_type === "direct" ? : '' + const indicatorPic = channel.channel_type === "direct" ? : let channelColor = 'transparent' if (channel.channel_type === "direct" && isActive) { channelColor = channel.channel_users[name.replace('@','')].darker_color; diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx index 33835ea5b..2d226a4a7 100644 --- a/app/javascript/chat/chat.jsx +++ b/app/javascript/chat/chat.jsx @@ -491,6 +491,11 @@ export default class Chat extends Component { this.setState({activeContent: newActiveContent}); setTimeout(function() { document.getElementById("chat_activecontent").scrollTop = 0; + document.getElementById("chat").scrollLeft = 1000 + }, 3); + setTimeout(function() { + document.getElementById("chat_activecontent").scrollTop = 0; + document.getElementById("chat").scrollLeft = 1000 }, 10); } diff --git a/app/javascript/chat/view.jsx b/app/javascript/chat/view.jsx index 5781a51b6..0a643b3fe 100644 --- a/app/javascript/chat/view.jsx +++ b/app/javascript/chat/view.jsx @@ -6,20 +6,23 @@ export default class View extends Component { render() { const channels = this.props.channels.map((channel) => { - return
{channel.channel_name} - - + return
+

{channel.channel_name}

+
{channel.description}
+ +
}); return
- -

Channel Invitations

-

Invitations are a work in progress ❤️

- {channels} +
+ +

Channel Invitations 🤗

+ {channels} +
} diff --git a/app/models/chat_channel.rb b/app/models/chat_channel.rb index 8d1c79ee4..d6d0b0a88 100644 --- a/app/models/chat_channel.rb +++ b/app/models/chat_channel.rb @@ -22,7 +22,8 @@ class ChatChannel < ApplicationRecord algoliasearch index_name: "SecuredChatChannel_#{Rails.env}" do attribute :id, :viewable_by, :slug, :channel_type, :channel_name, :channel_users, :last_message_at, :status, - :messages_count, :channel_human_names, :channel_mod_ids, :pending_users_select_fields + :messages_count, :channel_human_names, :channel_mod_ids, :pending_users_select_fields, + :description searchableAttributes [:channel_name, :channel_slug, :channel_human_names] attributesForFaceting ["filterOnly(viewable_by)", "filterOnly(status)", "filterOnly(channel_type)"] ranking ["desc(last_message_at)"] diff --git a/app/models/message.rb b/app/models/message.rb index a2ba3e241..0bf3e792c 100644 --- a/app/models/message.rb +++ b/app/models/message.rb @@ -35,7 +35,8 @@ class Message < ApplicationRecord subject: "https://dev.to", public_key: ENV["VAPID_PUBLIC_KEY"], private_key: ENV["VAPID_PRIVATE_KEY"], - }) + }, + ) end end @@ -70,7 +71,7 @@ class Message < ApplicationRecord html = html + "

- #{article.title} 👉

".html_safe + #{article.title}".html_safe end end html diff --git a/app/views/api/v0/articles/show.json.jbuilder b/app/views/api/v0/articles/show.json.jbuilder index 4de74a56c..a78775966 100644 --- a/app/views/api/v0/articles/show.json.jbuilder +++ b/app/views/api/v0/articles/show.json.jbuilder @@ -4,8 +4,9 @@ json.title @article.title json.description @article.description json.cover_image cloud_cover_url @article.main_image json.published_at @article.published_at +json.readable_publish_date @article.readable_publish_date json.social_image cloud_social_image(@article) -json.tag_list @article.tag_list +json.tag_list @article.cached_tag_list json.slug @article.slug json.path @article.path json.url @article.url diff --git a/app/views/chat_channels/index.html.erb b/app/views/chat_channels/index.html.erb index 25b203994..4ea36bb4d 100644 --- a/app/views/chat_channels/index.html.erb +++ b/app/views/chat_channels/index.html.erb @@ -10,7 +10,6 @@ <% if user_signed_in? %> <%= javascript_pack_tag 'chat', defer: true %>
-
DEV Connect is Beta (Work in Progress ❤️)
-
+
diff --git a/app/views/chat_channels/index.json.jbuilder b/app/views/chat_channels/index.json.jbuilder index 90af37b19..3ab74182f 100644 --- a/app/views/chat_channels/index.json.jbuilder +++ b/app/views/chat_channels/index.json.jbuilder @@ -8,4 +8,5 @@ json.array! (@chat_channels_memberships.sort_by { |m| m.chat_channel.last_messag json.last_message_at membership.chat_channel.last_message_at json.adjusted_slug membership.chat_channel.adjusted_slug(current_user) json.membership_id membership.id + json.description membership.chat_channel.description end diff --git a/db/migrate/20180716182629_add_description_to_chat_channels.rb b/db/migrate/20180716182629_add_description_to_chat_channels.rb new file mode 100644 index 000000000..7a48bd764 --- /dev/null +++ b/db/migrate/20180716182629_add_description_to_chat_channels.rb @@ -0,0 +1,5 @@ +class AddDescriptionToChatChannels < ActiveRecord::Migration[5.1] + def change + add_column :chat_channels, :description, :string + end +end diff --git a/db/schema.rb b/db/schema.rb index a9ec63ca1..d4869f2a3 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -10,7 +10,7 @@ # # It's strongly recommended that you check this file into your version control system. -ActiveRecord::Schema.define(version: 20180707162348) do +ActiveRecord::Schema.define(version: 20180716182629) do # These are extensions that must be enabled in order to support this database enable_extension "plpgsql" @@ -180,6 +180,7 @@ ActiveRecord::Schema.define(version: 20180707162348) do t.string "channel_name" t.string "channel_type", null: false t.datetime "created_at", null: false + t.string "description" t.datetime "last_message_at", default: "2017-01-01 05:00:00" t.string "slug" t.string "status", default: "active" diff --git a/spec/requests/chat_channels_spec.rb b/spec/requests/chat_channels_spec.rb index a7642d465..ecde241a1 100644 --- a/spec/requests/chat_channels_spec.rb +++ b/spec/requests/chat_channels_spec.rb @@ -19,7 +19,7 @@ RSpec.describe "ChatChannels", type: :request do end it "has proper content" do - expect(response.body).to include("DEV Connect is Beta ") + expect(response.body).to include("chat-page-wrapper") end end @@ -31,7 +31,7 @@ RSpec.describe "ChatChannels", type: :request do end it "has proper content" do - expect(response.body).to include("DEV Connect is Beta ") + expect(response.body).to include("chat-page-wrapper") end end end