Commit 549055b8 authored by Asaad Mahmood's avatar Asaad Mahmood Committed by Carlos Tadeu Panato Junior

Ui improvements (#1399)

* MM-11121 - Updating searchbar icon and add team icon

* MM-11121 - Updating search bar

* MM-11122 - Updating styling of emoji picker

* Updating gfycat

* MM-11111 - Fixing expand/collapse icon for psots

* MM-11112 - Updating post icons

* Updating gfycat image size

* Updating gfycat popover height
parent 2988595e
......@@ -17,7 +17,7 @@ import EmojiPickerPreview from './components/emoji_picker_preview';
const CATEGORY_SEARCH_RESULTS = 'searchResults';
const EMOJI_HEIGHT = 27;
const EMOJI_CONTAINER_HEIGHT = 244;
const EMOJI_CONTAINER_HEIGHT = 290;
const EMOJI_CONTAINER_STYLE = {
height: EMOJI_CONTAINER_HEIGHT,
};
......
.search-bar {
.gfycat-search {
position: relative;
width: 100%;
padding: .8rem .6rem 0;
box-sizing: border-box;
padding: 8px 7px 1px 7px;
.search-input {
position: relative;
display: block;
box-sizing: border-box;
width: 100%;
height: 2.7rem;
padding: 0 2.6rem;
height: 29px;
padding: 0 27px;
font-size: 1.3rem;
border-radius: 1.4rem;
border-radius: 30px;
border-width: 1px;
border-style: solid;
outline: none;
......@@ -35,9 +35,9 @@
.placeholder {
position: absolute;
top: 1.3rem;
left: 3.3rem;
font-size: 1.2rem;
top: 14px;
left: 34px;
font-size: 13px;
}
.ic {
......@@ -54,20 +54,20 @@
}
.ic-clear-search {
top: 1.1rem;
right: 1rem;
right: 12px;
top: 12px;
width: 2rem;
height: 2rem;
}
.ic-search {
top: .7rem;
left: .7rem;
width: 2.5rem;
height: 3rem;
top: 11px;
left: 11px;
width: 2.4rem;
height: 2.4rem;
}
}
.search-form .submit-button {
display: none;
.submit-button {
display: none;
}
}
......@@ -200,7 +200,7 @@ export class SearchBar extends Component {
return (
<form
className='search-form'
className='gfycat-search'
method='get'
target='_top'
noValidate=''
......
......@@ -172,7 +172,7 @@ export class SearchGrid extends PureComponent {
// Item width in %
//const itemWidth = this.numberOfColumns === NUMBER_OF_COLUMNS_PORTRAIT ? 100 / NUMBER_OF_COLUMNS_PORTRAIT : 100 / this.numberOfColumns;
const itemWidth = 122;
const itemWidth = 140;
const searchItems = containerWidth && items.length ?
items.map((item, index) => {
......
......@@ -4,7 +4,7 @@
margin: 0 auto;
font-size: 0;
overflow-x: hidden;
height: 292px;
height: 336px;
}
.empty-search {
......
......@@ -10,8 +10,8 @@ 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={localizeMessage('generic_icons.attach', 'Attachment Icon')}
......
......@@ -158,12 +158,7 @@ export default class TeamSidebar extends React.Component {
defaultMessage='Other teams you can join.'
/>
}
content={
<i
className='fa fa-plus'
title={Utils.localizeMessage('generic_icons.join', 'Join Icon')}
/>
}
content={'+'}
/>
);
} else {
......@@ -182,12 +177,7 @@ export default class TeamSidebar extends React.Component {
defaultMessage='Create a New Team'
/>
}
content={
<i
className='fa fa-plus'
title={Utils.localizeMessage('generic_icons.join', 'Join Icon')}
/>
}
content={'+'}
/>
</SystemPermissionGate>
);
......
......@@ -48,6 +48,7 @@
}
.emoji-picker {
@include border-radius($border-rad);
@include clearfix;
@include user-select(none);
border-radius: 3px;
......@@ -56,9 +57,13 @@
flex-direction: column;
margin-right: 3px;
position: absolute;
width: 278px;
width: 315px;
z-index: 999;
.browser--ie & {
width: 325px;
}
.app__content & {
margin-right: 0;
}
......@@ -69,12 +74,16 @@
.nav-tabs {
margin-bottom: 0px;
height: 34px;
display: flex;
justify-content: flex-end;
li {
width: 139px;
flex: 1;
a {
border: 0;
border: none !important;
border-bottom: 2px solid transparent !important;
border-bottom-width: 2px;
border-bottom-style: solid;
opacity: 0.7;
......@@ -87,13 +96,7 @@
}
li.active {
width: 139px;
a {
border: 0 !important;
border-bottom-width: 2px !important;
border-bottom-style: solid !important;
border-radius: 1px;
opacity: 1;
height: 34px;
margin-left: 5px;
......@@ -111,15 +114,14 @@
.emoji-picker__categories {
flex-grow: 0;
flex-shrink: 0;
height: 34px;
padding-left: 3px;
padding-top: 3px;
display: flex;
justify-content: space-between;
padding: 5px 10px;
.emoji-picker__category {
color: #333333;
display: inline-block;
font-size: 16px;
margin: 3px 6px;
text-align: center;
width: 15px;
......@@ -139,22 +141,22 @@
border-style: solid;
border-width: 1px;
border-radius: 14px;
margin: 6px 5px 0px 5px;
margin: 8px 7px 1px 7px;
.emoji-picker__search-icon {
padding-left: 7px;
padding-left: 9px;
padding-top: 6px;
position: absolute;
font-size: 13px;
font-size: 14px;
}
.emoji-picker__search {
border-width: 0px;
border-radius: inherit;
padding: 2px 0 2px 26px;
padding: 2px 0 2px 27px;
width: 100%;
height: 25px;
font-size: 12px;
height: 26px;
font-size: 13px;
&:focus{
outline: none;
......@@ -167,7 +169,7 @@
border-top-width: 1px;
overflow-x: hidden;
overflow-y: auto;
padding: 8px;
padding: 0 8px 8px;
position: relative;
width: 100%;
......@@ -205,6 +207,7 @@
position: relative;
vertical-align: middle;
width: 26px;
margin: 0 3px 1px;
> div {
text-align: center;
......@@ -269,11 +272,14 @@
flex-grow: 0;
flex-shrink: 0;
height: 50px;
padding: 5px 10px;
justify-content: flex-start;
padding: 7px 10px 0;
position: relative;
vertical-align: middle;
width: 278px;
&.emoji-picker__preview-placeholder {
padding: 15px;
padding: 12px;
}
> div {
......@@ -297,7 +303,6 @@
}
.emoji-picker__preview-image-box {
margin-top: 2px;
display: flex;
align-items: center;
justify-content: center;
......
......@@ -518,7 +518,7 @@
svg {
position: relative;
top: 2px;
top: 1px;
}
}
......@@ -550,7 +550,7 @@
svg {
position: relative;
top: 3px;
top: 2px;
}
}
}
......@@ -1600,9 +1600,11 @@
font: normal normal normal 14px/1 FontAwesome;
margin: 0;
text-rendering: auto;
position: relative;
z-index: 5;
&.pull-left {
margin: 5px 5px 0 0;
margin: 4px 5px 0 0;
}
&:hover {
......
......@@ -767,7 +767,6 @@ export function applyTheme(theme) {
changeCss('.app__body .emoji-picker', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.app__body .emoji-picker__search-icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
changeCss('.app__body .emoji-picker__preview, .app__body .emoji-picker__items, .app__body .emoji-picker__search-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
changeCss('.app__body .emoji-picker__items', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.05));
changeCss('.emoji-picker__category .fa:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
changeCss('.app__body .emoji-picker__category, .app__body .emoji-picker__category:focus, .app__body .emoji-picker__category:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.3));
changeCss('.app__body .emoji-picker__category--selected, .app__body .emoji-picker__category--selected:focus, .app__body .emoji-picker__category--selected:hover', 'color:' + theme.centerChannelColor);
......
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