maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[deploy] Small update to /connect design (#7510)

Browse source 
* Initial work

* Full screen mode adjustments

* Update snapshots
This commit is contained in:
Ben Halpern 2020-04-26 13:26:49 -04:00 • committed by GitHub
parent 28d24854c6
commit 7a6e7301a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 92 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
app/assets/stylesheets/chat.scss
View file

@ -3,39 +3,29 @@
// High level classes
.chat-page-wrapper {
margin: 10px auto 0px;
width: 96%;
margin: 0px auto 0px;
width: 100%;
max-width: calc(1540px + 10vw);
}
.live-chat {
height: calc(100vh - 70px);
height: calc(100vh - 56px);
&.live-chat--iossafari {
height: calc(100vh - 190px);
}
overflow-y: hidden;
@media screen and (min-width: 400px) {
height: calc(100vh - 70px);
}
}
//chat
.chat {
display: flex;
height: calc(100vh - 80px);
height: calc(100vh - 56px);
&.chat--iossafari {
height: calc(100vh - 201px);
}
padding-right: 3px;
@media screen and (min-width: 400px) {
height: calc(100vh - 80px);
}
}
.chat--expanded {
@ -76,6 +66,7 @@
height: inherit;
position: relative;
overflow: hidden;
padding-top: 5px;
.chat__channelssearchtoggle {
background: transparent;
@ -156,7 +147,7 @@
color: var(--body-color);
@media screen and (min-width: 1000px) {
width: calc(100% - 13px);
width: 98%;
}
}
@ -215,11 +206,22 @@
display: flex;
flex-direction: row;
justify-content: space-between;
border-radius: 5px;
@include themeable(border, theme-container-border, 1px solid $outline-color);
background: var(--card-bg);
flex-flow: row nowrap;
position: relative;
@include themeable(
border-left,
theme-container-border,
1px solid $outline-color
);
@media screen and (min-width: 1540px) {
@include themeable(
border,
theme-container-border,
1px solid $outline-color
);
border-top: 0px;
}
}
.activechatchannel__conversation {
@ -300,17 +302,11 @@
}
.activechatchannel__form {
@include themeable(
border-top,
theme-container-border,
1px solid $outline-color
);
@include themeable(background, theme-container-accent-background, #ededed);
width: 100%;
height: 63px;
height: 73px;
position: relative;
@media screen and (min-height: 1000px) {
height: 85px;
height: 95px;
}
}
@ -417,7 +413,6 @@
bottom: 0;
width: 100%;
min-width: 100%;
border-radius: 5px;
}
.activechatchannel__activecontent.activechatchannel__activecontent--video {
position: absolute;
@ -439,7 +434,6 @@
bottom: 0;
width: 100%;
min-width: 100%;
border-radius: 5px;
}
.activechatchannel__activecontent.activechatchannel__activecontent--sidecar {
display: none;
@ -561,7 +555,7 @@
}
.chatchanneltabbutton {
width: calc(95% - 2px);
width: calc(100% - 2px);
border: none;
background: transparent;
padding: 2px 0px;
@ -597,10 +591,14 @@
.chatchanneltab--active {
border: 1px solid var(--base-30);
background: var(--base-10);
img {
border: 1px solid var(--base-30);
}
}
.chatchanneltab--new {
border: 1px solid var(--accent-brand);
border: 1px solid var(--accent-brand-darker);
color: var(--accent-brand-darker);
}
@ -613,15 +611,15 @@
display: inline-block;
min-height: 0.3em;
min-width: 0.3em;
border-radius: 100px;
margin-right: 5px;
border: 1px solid var(--base-30);
img {
height: calc(22px + 0.3vw);
width: calc(22px + 0.3vw);
vertical-align: calc(-6px - 0.14vw);
border-radius: 100px;
border: 1px solid var(--base-30);
background: white;
}
.chatchanneltabgroupicon {
@ -630,7 +628,34 @@
}
}
.chatchanneltabindicator--new {
.chat--contracted {
.chatchannels {
width: 45px;
}
.chatchanneltabbutton {
margin-left: 1px;
}
.chatchanneltab {
padding: 6px 1px;
img {
height: 36px;
width: 36px;
}
}
.chatchanneltab--active {
background: var(--base-20);
}
.chatchanneltab--new {
background: var(--accent-brand-darker);
color: white;
}
}
.chatchanneltabindicator .chatchanneltabindicatorgroupimage {
border-radius: 3px;
}
.chatchanneltabindicator--new img {
border: 1px solid var(--accent-brand);
}
@ -802,9 +827,6 @@
}
}
.chatmessagebody__divider {
}
.chatmessagebody__message {
p {
margin-top: 0;
@ -847,15 +869,15 @@
}
.messagecomposer__input {
border-radius: 3px;
border-radius: 5px;
font-size: 16px;
margin: 4px 4px 4px 6px;
padding: 4px;
margin: 0px 4px 4px 6px;
padding: 5px;
resize: none;
flex-grow: 1;
height: 44px;
background: var(--card-bg);
@include themeable(border, theme-border, 1px solid $outline-color);
border: 1px solid var(--base-40);
color: var(--body-color);
@media screen and (min-height: 1000px) {
height: 66px;
@ -863,8 +885,8 @@
}
.messagecomposer__submit {
margin: 4px 6px 4px 0;
border-radius: 3px;
margin: 0px 6px 4px 0;
border-radius: 5px;
background: var(--accent-brand);
font-weight: 600px;
font-family: $helvetica-condensed;

20
app/javascript/chat/__tests__/__snapshots__/channels.test.jsx.snap
View file

@ -9,7 +9,7 @@ exports[`<Channels /> expanded with chat channels should render and test snapsho
id="chatchannels__channelslist"
>
<button
class="chatchanneltabbutton"
class="chatchanneltabbutton crayons-link"
data-channel-slug="@0"
onClick={[Function]}
type="button"
@ -30,14 +30,14 @@ exports[`<Channels /> expanded with chat channels should render and test snapsho
>
<img
alt="pic"
class="chatchanneltabindicatordirectimage invert-channel-image"
class="chatchanneltabindicatorgroupimage invert-channel-image"
/>
</span>
channel name 1
</span>
</button>
<button
class="chatchanneltabbutton"
class="chatchanneltabbutton crayons-link"
data-channel-slug="@1"
onClick={[Function]}
type="button"
@ -65,7 +65,7 @@ exports[`<Channels /> expanded with chat channels should render and test snapsho
</span>
</button>
<button
class="chatchanneltabbutton"
class="chatchanneltabbutton crayons-link"
data-channel-slug="@2"
onClick={[Function]}
type="button"
@ -86,7 +86,7 @@ exports[`<Channels /> expanded with chat channels should render and test snapsho
>
<img
alt="pic"
class="chatchanneltabindicatordirectimage invert-channel-image"
class="chatchanneltabindicatorgroupimage invert-channel-image"
/>
</span>
group channel 3
@ -186,7 +186,7 @@ exports[`<Channels /> not expanded with chat channels should render and test sna
id="chatchannels__channelslist"
>
<button
class="chatchanneltabbutton"
class="chatchanneltabbutton crayons-link"
data-channel-slug="@0"
onClick={[Function]}
type="button"
@ -207,14 +207,14 @@ exports[`<Channels /> not expanded with chat channels should render and test sna
>
<img
alt="pic"
class="chatchanneltabindicatordirectimage invert-channel-image"
class="chatchanneltabindicatorgroupimage invert-channel-image"
/>
</span>
channel name 1
</span>
</button>
<button
class="chatchanneltabbutton"
class="chatchanneltabbutton crayons-link"
data-channel-slug="@1"
onClick={[Function]}
type="button"
@ -242,7 +242,7 @@ exports[`<Channels /> not expanded with chat channels should render and test sna
</span>
</button>
<button
class="chatchanneltabbutton"
class="chatchanneltabbutton crayons-link"
data-channel-slug="@2"
onClick={[Function]}
type="button"
@ -263,7 +263,7 @@ exports[`<Channels /> not expanded with chat channels should render and test sna
>
<img
alt="pic"
class="chatchanneltabindicatordirectimage invert-channel-image"
class="chatchanneltabindicatorgroupimage invert-channel-image"
/>
</span>
group channel 3

12
app/javascript/chat/__tests__/__snapshots__/chat.test.jsx.snap
View file

@ -70,7 +70,7 @@ exports[`<Chat /> should load chat 1`] = `
id="chatchannels__channelslist"
>
<button
class="chatchanneltabbutton"
class="chatchanneltabbutton crayons-link"
onClick={[Function]}
type="button"
>
@ -88,14 +88,14 @@ exports[`<Chat /> should load chat 1`] = `
>
<img
alt="pic"
class="chatchanneltabindicatordirectimage invert-channel-image"
class="chatchanneltabindicatorgroupimage invert-channel-image"
/>
</span>
channel name 1
</span>
</button>
<button
class="chatchanneltabbutton"
class="chatchanneltabbutton crayons-link"
onClick={[Function]}
type="button"
>
@ -120,7 +120,7 @@ exports[`<Chat /> should load chat 1`] = `
</span>
</button>
<button
class="chatchanneltabbutton"
class="chatchanneltabbutton crayons-link"
onClick={[Function]}
type="button"
>
@ -138,7 +138,7 @@ exports[`<Chat /> should load chat 1`] = `
>
<img
alt="pic"
class="chatchanneltabindicatordirectimage invert-channel-image"
class="chatchanneltabindicatorgroupimage invert-channel-image"
/>
</span>
group channel 3
@ -278,7 +278,7 @@ exports[`<Chat /> should load chat 1`] = `
onKeyDown={[Function]}
onKeyPress={[Function]}
onKeyUp={[Function]}
placeholder="Message goes here"
placeholder="Let's connect"
/>
<button
class="messagecomposer__submit cta"

2
app/javascript/chat/__tests__/__snapshots__/compose.test.jsx.snap
View file

@ -12,7 +12,7 @@ exports[`<Compose /> behavior with message should render and test snapshot 1`] =
id="messageform"
maxLength="1000"
onKeyDown={[Function]}
placeholder="Message goes here"
placeholder="Let's connect"
/>
<button
class="messagecomposer__submit cta"

2
app/javascript/chat/__tests__/compose.test.jsx
View file

@ -96,7 +96,7 @@ describe('<Compose />', () => {
expect(input.exists()).toEqual(true);
expect(input.text()).toEqual('');
expect(input.attr('maxLength')).toEqual('1000');
expect(input.attr('placeholder')).toEqual('Message goes here');
expect(input.attr('placeholder')).toEqual("Let's connect");
const btn = context.find('.messagecomposer__submit');
expect(btn.exists()).toEqual(true);

4
app/javascript/chat/channels.jsx
View file

@ -24,7 +24,7 @@ const Channels = ({
<button
type="button"
key={channel.id}
className="chatchanneltabbutton"
className="chatchanneltabbutton crayons-link"
onClick={handleSwitchChannel}
data-channel-id={channel.chat_channel_id}
data-channel-slug={channel.channel_modified_slug}
@ -49,7 +49,7 @@ const Channels = ({
className={
channel.channel_type === 'direct'
? 'chatchanneltabindicatordirectimage'
: 'chatchanneltabindicatordirectimage invert-channel-image'
: 'chatchanneltabindicatorgroupimage invert-channel-image'
}
/>
</span>

14
app/javascript/chat/chat.jsx
View file

@ -570,7 +570,7 @@ export default class Chat extends Component {
}
if (escPressed && activeContent[activeChannelId]) {
this.setActiveContentState(activeChannelId, null);
this.setState({fullscreenContent: null});
this.setState({fullscreenContent: null, expanded: window.innerWidth > 600});
}
};
@ -831,11 +831,11 @@ export default class Chat extends Component {
});
} else if (target.dataset.content === 'exit') {
this.setActiveContentState(activeChannelId, null);
this.setState({ fullscreenContent: null });
this.setState({ fullscreenContent: null, expanded: window.innerWidth > 600 });
} else if (target.dataset.content === 'fullscreen') {
const mode =
this.state.fullscreenContent === 'sidecar' ? null : 'sidecar';
this.setState({ fullscreenContent: mode });
this.setState({ fullscreenContent: mode, expanded: (mode === null || window.innerWidth > 1600) });
}
}
document.getElementById('messageform').focus();
@ -1189,9 +1189,9 @@ export default class Chat extends Component {
(this.scroller.scrollTop + this.scroller.clientHeight) /
this.scroller.scrollHeight;
if (scrolledRatio < 0.7) {
if (scrolledRatio < 0.5) {
jumpbackButton.classList.remove('chatchanneljumpback__hide');
} else if (scrolledRatio > 0.8) {
} else if (scrolledRatio > 0.6) {
jumpbackButton.classList.add('chatchanneljumpback__hide');
}
@ -1304,11 +1304,11 @@ export default class Chat extends Component {
onTriggerVideoContent = (e) => {
if (e.target.dataset.content === 'exit') {
this.setState({ videoPath: null, fullscreenContent: null });
this.setState({ videoPath: null, fullscreenContent: null, expanded: window.innerWidth > 600 });
} else if (this.state.fullscreenContent === 'video') {
this.setState({ fullscreenContent: null });
} else {
this.setState({ fullscreenContent: 'video' });
this.setState({ fullscreenContent: 'video', expanded: window.innerWidth > 1600 });
}
};

4
app/javascript/chat/compose.jsx
View file

@ -61,7 +61,7 @@ export default class Chat extends Component {
<textarea
className="messagecomposer__input"
id="messageform"
placeholder="Message goes here"
placeholder="Let's connect"
onKeyDown={handleKeyDownEdit}
onKeyPress={handleMention}
onKeyUp={handleKeyUp}
@ -90,7 +90,7 @@ export default class Chat extends Component {
<textarea
className="messagecomposer__input"
id="messageform"
placeholder="Message goes here"
placeholder="Let's connect"
onKeyDown={handleKeyDown}
onKeyPress={handleMention}
onKeyUp={handleKeyUp}