Commit ac044db6 authored by Asaad Mahmood's avatar Asaad Mahmood Committed by Harrison Healey
Browse files

MM-10500 - Implementing Relay chat UI updates (#1220)

* MM-10500 - Implementing Relay chat UI updates

* Updating relay chat UI fixes

* Updating border radius for dropdowns

* Updating relay chat UI

* Reverting package-lock

* Updating tests

* Reverting package.json
parent dc73bc50
......@@ -207,7 +207,7 @@ export default class PostInfo extends React.PureComponent {
if (hover && !isReadOnly && this.props.enableEmojiPicker) {
react = (
<span>
<div>
<EmojiPickerOverlay
show={this.state.showEmojiPicker}
container={this.props.getPostList}
......@@ -228,7 +228,7 @@ export default class PostInfo extends React.PureComponent {
<EmojiIcon className='icon icon--emoji'/>
</button>
</ChannelPermissionGate>
</span>
</div>
);
}
}
......
......@@ -387,7 +387,7 @@ export default class RhsComment extends React.Component {
if (!isReadOnly && !isEphemeral && !post.failed && !isSystemMessage && this.props.enableEmojiPicker) {
react = (
<span>
<div>
<EmojiPickerOverlay
show={this.state.showEmojiPicker}
onHide={this.toggleEmojiPicker}
......@@ -410,7 +410,7 @@ export default class RhsComment extends React.Component {
<EmojiIcon className='icon icon--emoji'/>
</button>
</ChannelPermissionGate>
</span>
</div>
);
}
......
......@@ -217,7 +217,7 @@ export default class RhsRootPost extends React.Component {
if (!isReadOnly && !isEphemeral && !post.failed && !isSystemMessage && this.props.enableEmojiPicker) {
react = (
<span>
<div>
<EmojiPickerOverlay
show={this.state.showEmojiPicker}
onHide={this.toggleEmojiPicker}
......@@ -240,7 +240,7 @@ export default class RhsRootPost extends React.Component {
<EmojiIcon className='icon icon--emoji'/>
</button>
</ChannelPermissionGate>
</span>
</div>
);
}
......
......@@ -251,7 +251,7 @@ export default class SearchResultsItem extends React.PureComponent {
);
rhsControls = (
<div className='col__controls'>
<div className='col__controls col__reply'>
<DotMenu
idPrefix={Constants.SEARCH_POST}
idCount={this.props.lastPostCount}
......
......@@ -8,9 +8,11 @@ export default class AttachmentIcon extends React.PureComponent {
return (
<span {...this.props}>
<svg
width='16px'
height='15px'
width='18px'
height='18px'
viewBox='0 0 18 15'
role='icon'
aria-label='Attachment icon'
>
<g
fill='inherit'
......
......@@ -8,9 +8,11 @@ export default class EmojiIcon extends React.PureComponent {
return (
<span {...this.props}>
<svg
width='15px'
height='15px'
width='16px'
height='16px'
viewBox='0 0 15 15'
role='icon'
aria-label='Emoji icon'
>
<g
stroke='none'
......
......@@ -69,9 +69,6 @@ export default class TeamButton extends React.Component {
content = (
<div className='team-btn__initials'>
{initials}
<div className='team-btn__content'>
{this.props.displayName}
</div>
</div>
);
}
......
......@@ -158,7 +158,7 @@ export default class TeamSidebar extends React.Component {
defaultMessage='Other teams you can join.'
/>
}
content={<i className='fa fa-plus'/>}
content={'+'}
/>
);
} else {
......@@ -177,7 +177,7 @@ export default class TeamSidebar extends React.Component {
defaultMessage='Create a New Team'
/>
}
content={<i className='fa fa-plus'/>}
content={'+'}
/>
</SystemPermissionGate>
);
......
@charset 'UTF-8';
.dropdown-menu {
border-radius: $border-rad;
@include border-radius(4px);
&.colorpicker {
min-width: 125px;
......
......@@ -122,7 +122,7 @@
}
.post__header {
padding-right: 85px;
padding-right: 100px;
}
.search-channel__name {
......@@ -144,13 +144,11 @@
.search-item__jump {
@include border-radius(4px);
font-size: 13px;
position: relative;
top: 1px;
}
.search-item__comment {
margin-right: 5px;
padding: 2px 7px 0;
text-decoration: none;
}
}
......
......@@ -31,8 +31,6 @@
.post__header {
.col__reply {
background: transparent !important;
border: none !important;
right: 5px;
text-align: right;
top: -3px;
......
......@@ -1171,7 +1171,7 @@
.post__header {
display: flex;
margin-bottom: 2px;
padding: 0 50px 0 0;
padding: 0 70px 0 0;
white-space: nowrap;
width: 100%;
......@@ -1201,15 +1201,81 @@
}
.col__reply {
@include border-radius(4px);
border: 1px solid transparent;
border-radius: 2px;
padding: 2px 5px 2px 6px;
display: flex;
justify-content: flex-end;
padding: 4px;
position: absolute;
right: 0;
top: -4px;
white-space: normal;
z-index: 6;
> div,
> button {
@include border-radius(4px);
display: flex;
flex: 1;
height: 24px;
top: 0;
width: 24px;
}
.comment-icon__container {
flex: 0;
justify-content: flex-end;
padding: 0 4px 0 0;
width: auto;
}
.dropdown {
> div {
display: flex;
flex: 1;
justify-content: center;
}
}
.reacticon__container,
.icon {
display: flex;
flex: 1;
margin: 0;
top: 0;
}
.reacticon__container {
width: 28px;
}
&:hover {
@include border-radius(4px);
background: #f1f1f1;
}
> .open, > div {
display: flex;
flex: 1;
justify-content: center;
}
span {
svg {
flex: 1;
height: 16px;
top: 0;
width: 16px;
}
}
svg {
flex: 1;
height: 16px;
top: 0;
width: 16px;
}
&.dot_small {
min-width: auto !important;
}
......@@ -1276,7 +1342,6 @@
.dropdown {
display: inline-block;
margin-right: 5px;
top: -1px;
vertical-align: middle;
visibility: hidden;
......@@ -1303,13 +1368,18 @@
}
.post__dropdown {
display: flex;
justify-content: center;
text-decoration: none;
vertical-align: middle;
width: 100%;
&:after {
content: '[...]';
content: '...';
font-family: 'Open Sans', sans-serif;
position: relative;
top: -1px;
width: 100%;
}
}
......@@ -1599,6 +1669,7 @@
display: inline-block;
fill: $primary-color;
position: relative;
text-decoration: none;
top: 1px;
visibility: hidden;
......
......@@ -16,52 +16,45 @@
padding-top: 15px;
.team-container {
display: table;
margin-bottom: 10px;
display: flex;
justify-content: center;
margin-bottom: 16px;
position: relative;
text-align: center;
width: 100%;
a {
@include opacity(.7);
display: block;
margin-left: 11px;
height: 100%;
text-decoration: none;
}
&.active {
a {
@include opacity(1);
}
}
button {
text-decoration: none;
padding: 0;
border: none;
padding: 0;
text-decoration: none;
}
.team-btn {
@include border-radius(4px);
background-color: alpha-color($black, .3);
border: 1px solid alpha-color($white, .2);
display: table-cell;
font-size: 12px;
font-weight: bold;
height: 43px;
line-height: 1.3;
height: 44px;
letter-spacing: -.5px;
line-height: 42px;
position: relative;
text-align: center;
text-transform: capitalize;
vertical-align: top;
width: 43px;
.team-btn__initials {
margin: 7px 5px 0;
text-align: left;
}
.team-btn__content {
bottom: 4px;
font-size: 8.5px;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 31px;
}
width: 44px;
.team-btn__image {
@include border-radius(4px);
......@@ -84,6 +77,8 @@
}
&.team-btn__add {
font-size: 25px;
line-height: 41px;
vertical-align: middle;
}
}
......
......@@ -98,7 +98,7 @@ exports[`components/SearchResultsItem should match snapshot for DM 1`] = `
/>
</div>
<div
className="col__controls"
className="col__controls col__reply"
>
<Connect(DotMenu)
handleDropdownOpened={[Function]}
......@@ -288,7 +288,7 @@ exports[`components/SearchResultsItem should match snapshot for channel 1`] = `
/>
</div>
<div
className="col__controls"
className="col__controls col__reply"
>
<Connect(DotMenu)
handleDropdownOpened={[Function]}
......
......@@ -700,7 +700,7 @@ export function applyTheme(theme) {
changeCss('.app__body .shadow--2', '-webkit-box-shadow: 0 20px 30px 0 ' + changeOpacity(theme.centerChannelColor, 0.1) + ', 0 14px 20px 0 ' + changeOpacity(theme.centerChannelColor, 0.1));
changeCss('.app__body .shortcut-key, .app__body .post__body hr, .app__body .loading-screen .loading__content .round, .app__body .tutorial__circles .circle', 'background:' + theme.centerChannelColor);
changeCss('.app__body .channel-header .heading', 'color:' + theme.centerChannelColor);
changeCss('.app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07));
changeCss('.app__body .col__reply > button:hover, .app__body .col__reply > a:hover, .app__body .col__reply > div:hover, .app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07));
changeCss('.app__body .channel-header__info .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
changeCss('.app__body .post-create__container .post-create-body .send-button.disabled i, .app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6));
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment