Remove beta label on /connect and other small changes (#589)
* Remove beta label on /connect and other small changes * Add better placeholder for narrow screens * Adjust comma/bracket placement * Add description to chat channels
This commit is contained in:
Ben Halpern
GitHub
parent
9b753a4e9c
commit
e2dbd7cfcc
15 changed files with 201 additions and 58 deletions
59
app/assets/images/organization.svg
Normal file
59
app/assets/images/organization.svg
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M467.166,309.626c-0.216-0.125-0.437-0.241-0.654-0.362c0.506-5.951,0.779-11.968,0.779-18.048
|
||||
c0-84.484-49.849-157.533-121.671-191.312c0.001-0.257,0.019-0.511,0.019-0.77c0-49.506-40.132-89.638-89.638-89.638
|
||||
s-89.638,40.132-89.638,89.638c0,0.257,0.018,0.511,0.019,0.77C94.559,133.684,44.71,206.733,44.71,291.216
|
||||
c0,6.08,0.273,12.095,0.779,18.045c-0.218,0.125-0.439,0.241-0.657,0.365c-42.871,24.753-57.561,79.576-32.808,122.448
|
||||
c16.604,28.757,46.733,44.834,77.714,44.834c15.205,0,30.619-3.874,44.735-12.024c0.241-0.14,0.47-0.293,0.709-0.434
|
||||
c34.263,23.969,75.925,38.055,120.821,38.055c44.895,0,86.556-14.086,120.819-38.054c0.24,0.141,0.467,0.293,0.708,0.433
|
||||
c14.117,8.151,29.528,12.026,44.736,12.026c30.978,0,61.11-16.079,77.712-44.834C524.729,389.203,510.041,334.379,467.166,309.626
|
||||
z M256.001,47.912c28.244,0,51.222,22.977,51.222,51.222c0,28.245-22.978,51.222-51.222,51.222
|
||||
c-28.244,0-51.222-22.977-51.222-51.222C204.78,70.889,227.758,47.912,256.001,47.912z M139.13,400.513
|
||||
c-3.542,13.215-12.017,24.263-23.867,31.103c-7.791,4.499-16.618,6.877-25.525,6.877c-18.289,0-35.319-9.819-44.445-25.626
|
||||
c-14.122-24.46-5.711-55.848,18.75-69.971c7.791-4.5,16.619-6.877,25.526-6.877h0.004c18.285,0,35.314,9.819,44.44,25.626
|
||||
C140.854,373.493,142.671,387.296,139.13,400.513z M348.076,437.463c-26.676,16.854-58.253,26.626-92.074,26.626
|
||||
c-33.823,0-65.401-9.772-92.078-26.626c18.576-27.524,21.076-64.336,3.358-95.027c-16.602-28.756-46.731-44.834-77.71-44.834
|
||||
c-0.001,0-0.001,0-0.004,0c-2.099,0-4.2,0.081-6.303,0.23c-0.083-2.197-0.138-4.401-0.138-6.617
|
||||
c0-66.223,37.434-123.857,92.248-152.882c14.544,29.858,45.179,50.438,80.626,50.438s66.081-20.578,80.626-50.438
|
||||
c54.814,29.025,92.248,86.658,92.248,152.882c0,2.215-0.055,4.419-0.138,6.615c-2.1-0.147-4.2-0.229-6.296-0.229
|
||||
c-0.003,0-0.005,0-0.008,0c-30.978,0.001-61.113,16.08-77.714,44.836C327,373.129,329.501,409.94,348.076,437.463z
|
||||
M466.707,412.867c-9.126,15.807-26.155,25.626-44.444,25.626c-8.907,0-17.734-2.378-25.528-6.878
|
||||
c-24.46-14.122-32.87-45.511-18.748-69.97c9.125-15.807,26.156-25.626,44.445-25.628h0.008c8.902,0,17.727,2.377,25.519,6.877
|
||||
C472.42,357.016,480.829,388.406,466.707,412.867z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className='activechatchannel__activeArticle'>
|
||||
<div className="activechatchannel__activeArticleDetails">
|
||||
<a href={article.path} target='_blank'>
|
||||
<span className="activechatchannel__activeArticleDetailsPath">{article.path}</span>
|
||||
<img src={openLink} />
|
||||
</a>
|
||||
</div>
|
||||
<div className="container">
|
||||
{coverImage}
|
||||
<div className="title">
|
||||
<h1>{article.title}</h1>
|
||||
<h3>
|
||||
<a href={'/'+article.user.username} className="author" data-content={'/users/'+article.user.id}>
|
||||
<img className="profile-pic" src={article.user.profile_image_90} alt={article.user.username}/>
|
||||
<span>{article.user.name}</span>
|
||||
<img className="profile-pic" src={article.user.profile_image_90} alt={article.user.username}/>
|
||||
<span>{article.user.name} </span>
|
||||
<span class="published-at"> | {article.readable_publish_date}</span>
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -107,6 +107,9 @@ export default class ChannelDetails extends Component {
|
|||
return <div>
|
||||
<h1>{channel.channel_name}</h1>
|
||||
{subHeader}
|
||||
<div style={{marginBottom: '20px'}}>
|
||||
<em>{channel.description || ''}</em>
|
||||
</div>
|
||||
{users}
|
||||
{modSection}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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" ? <img src = {channel.channel_users[name.replace('@','')].profile_image} /> : ''
|
||||
const indicatorPic = channel.channel_type === "direct" ? <img src = {channel.channel_users[name.replace('@','')].profile_image} className='chatchanneltabindicatordirectimage' /> : <img src={GroupImage} />
|
||||
let channelColor = 'transparent'
|
||||
if (channel.channel_type === "direct" && isActive) {
|
||||
channelColor = channel.channel_users[name.replace('@','')].darker_color;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,20 +6,23 @@ export default class View extends Component {
|
|||
|
||||
render() {
|
||||
const channels = this.props.channels.map((channel) => {
|
||||
return <div>{channel.channel_name}
|
||||
<button onClick={this.props.onAcceptInvitation} data-content={channel.membership_id}>Accept</button>
|
||||
<button onClick={this.props.onDeclineInvitation} data-content={channel.membership_id}>Decline</button>
|
||||
return <div className='chatNonChatView_contentblock'>
|
||||
<h2>{channel.channel_name}</h2>
|
||||
<div><em>{channel.description}</em></div>
|
||||
<button className='cta' onClick={this.props.onAcceptInvitation} data-content={channel.membership_id}>Accept</button>
|
||||
<button className='cta' onClick={this.props.onDeclineInvitation} data-content={channel.membership_id}>Decline</button>
|
||||
</div>
|
||||
});
|
||||
return <div className="chatNonChatView">
|
||||
<button
|
||||
class="chatNonChatView_exitbutton"
|
||||
data-content="exit"
|
||||
onClick={this.props.onViewExit}
|
||||
>×</button>
|
||||
<h1>Channel Invitations</h1>
|
||||
<h2>Invitations are a work in progress ❤️</h2>
|
||||
{channels}
|
||||
<div className="container">
|
||||
<button
|
||||
class="chatNonChatView_exitbutton"
|
||||
data-content="exit"
|
||||
onClick={this.props.onViewExit}
|
||||
>×</button>
|
||||
<h1>Channel Invitations 🤗</h1>
|
||||
{channels}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)"]
|
||||
|
|
|
|||
|
|
@ -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 + "<a style='color: #0a0a0a' href='#{article.path}'
|
||||
target='_blank' data-content='articles/#{article.id}'>
|
||||
<h1 style='#{rich_style}' data-content='articles/#{article.id}'>
|
||||
#{article.title} 👉</h1></a>".html_safe
|
||||
#{article.title}</h1></a>".html_safe
|
||||
end
|
||||
end
|
||||
html
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<% if user_signed_in? %>
|
||||
<%= javascript_pack_tag 'chat', defer: true %>
|
||||
<div class="chat-page-wrapper">
|
||||
<div class="chat-page-header">DEV Connect is Beta (Work in Progress ❤️)</div>
|
||||
<div
|
||||
id="chat"
|
||||
class="live-chat"
|
||||
|
|
@ -23,7 +22,7 @@
|
|||
data-chat-options="<%= {showChannelsList:true, showTimestamp: true, activeChannelId: @active_channel&.id }.to_json %>"
|
||||
>
|
||||
<div class="chat" id="chat_placeholder">
|
||||
<div class="chat__channels chat__channels--expanded">
|
||||
<div class="chat__channels chat__channels--expanded chat__channels--placeholder">
|
||||
<button class="chat__channelstogglebutt" onClick={this.toggleExpand}><</button>
|
||||
<input placeholder='Filter' onKeyUp={this.triggerChannelFilter} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
class AddDescriptionToChatChannels < ActiveRecord::Migration[5.1]
|
||||
def change
|
||||
add_column :chat_channels, :description, :string
|
||||
end
|
||||
end
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue