IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2171 from asaadmahmoodspin/ui-fixes

Browse Source 
Multiple UI Improvements
This commit is contained in:
Joram Wilander
2016-02-16 08:19:19 -05:00
parent 2ec3762fb2 44fa72066b
commit 6ffcfaa2f3
9 changed files with 213 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/react/components/post_info.jsx
View File

@@ -14,9 +14,17 @@ export default class PostInfo extends React.Component {
constructor(props) {
super(props);
this.dropdownPosition = this.dropdownPosition.bind(this);
this.handlePermalink = this.handlePermalink.bind(this);
this.removePost = this.removePost.bind(this);
}
dropdownPosition(e) {
var position = $('#post-list').height() - $(e.target).offset().top;
var dropdown = $(e.target).next('.dropdown-menu');
if (position < dropdown.height()) {
dropdown.addClass('bottom');
}
}
createDropdown() {
var post = this.props.post;
var isOwner = UserStore.getCurrentId() === post.user_id;
@@ -133,6 +141,7 @@ export default class PostInfo extends React.Component {
type='button'
data-toggle='dropdown'
aria-expanded='false'
onClick={this.dropdownPosition}
/>
<ul
className='dropdown-menu'

115
web/react/components/user_settings/custom_theme_chooser.jsx
View File

@@ -102,6 +102,7 @@ class CustomThemeChooser extends React.Component {
this.onPickerChange = this.onPickerChange.bind(this);
this.onInputChange = this.onInputChange.bind(this);
this.pasteBoxChange = this.pasteBoxChange.bind(this);
this.toggleContent = this.toggleContent.bind(this);
this.state = {};
}
@@ -153,11 +154,23 @@ class CustomThemeChooser extends React.Component {
this.props.updateTheme(theme);
}
toggleContent(e) {
e.stopPropagation();
if ($(e.target).hasClass('theme-elements__header')) {
$(e.target).next().slideToggle();
$(e.target).toggleClass('open');
} else {
$(e.target).closest('.theme-elements__header').next().slideToggle();
$(e.target).closest('.theme-elements__header').toggleClass('open');
}
}
render() {
const {formatMessage} = this.props.intl;
const theme = this.props.theme;
const elements = [];
const sidebarElements = [];
const centerChannelElements = [];
const linkAndButtonElements = [];
let colors = '';
Constants.THEME_ELEMENTS.forEach((element, index) => {
if (element.id === 'codeTheme') {
@@ -187,9 +200,9 @@ class CustomThemeChooser extends React.Component {
</Popover>
);
elements.push(
centerChannelElements.push(
<div
className='col-sm-4 form-group'
className='col-sm-6 form-group'
key={'custom-theme-key' + index}
>
<label className='custom-label'>{formatMessage(messages[element.id])}</label>
@@ -219,10 +232,54 @@ class CustomThemeChooser extends React.Component {
</div>
</div>
);
} else {
elements.push(
} else if (element.group === 'centerChannelElements') {
centerChannelElements.push(
<div
className='col-sm-4 form-group element'
className='col-sm-6 form-group element'
key={'custom-theme-key' + index}
>
<label className='custom-label'>{formatMessage(messages[element.id])}</label>
<div
className='input-group color-picker'
id={element.id}
>
<input
className='form-control'
type='text'
value={theme[element.id]}
onChange={this.onInputChange}
/>
<span className='input-group-addon'><i></i></span>
</div>
</div>
);
} else if (element.group === 'sidebarElements') {
sidebarElements.push(
<div
className='col-sm-6 form-group element'
key={'custom-theme-key' + index}
>
<label className='custom-label'>{formatMessage(messages[element.id])}</label>
<div
className='input-group color-picker'
id={element.id}
>
<input
className='form-control'
type='text'
value={theme[element.id]}
onChange={this.onInputChange}
/>
<span className='input-group-addon'><i></i></span>
</div>
</div>
);
colors += theme[element.id] + ',';
} else {
linkAndButtonElements.push(
<div
className='col-sm-6 form-group element'
key={'custom-theme-key' + index}
>
<label className='custom-label'>{formatMessage(messages[element.id])}</label>
@@ -265,9 +322,51 @@ class CustomThemeChooser extends React.Component {
);
return (
<div className='appearance-section'>
<div className='appearance-section padding-top'>
<div className='theme-elements row'>
<div
className='theme-elements__header'
onClick={this.toggleContent}
>
{'Sidebar Styles'}
<div className='header__icon'>
<i className='fa fa-plus'></i>
<i className='fa fa-minus'></i>
</div>
</div>
<div className='theme-elements__body'>
{sidebarElements}
</div>
</div>
<div className='theme-elements row'>
<div
className='theme-elements__header'
onClick={this.toggleContent}
>
{'Center Channel Styles'}
<div className='header__icon'>
<i className='fa fa-plus'></i>
<i className='fa fa-minus'></i>
</div>
</div>
<div className='theme-elements__body'>
{centerChannelElements}
</div>
</div>
<div className='theme-elements row form-group'>
{elements}
<div
className='theme-elements__header'
onClick={this.toggleContent}
>
{'Link and Button Styles'}
<div className='header__icon'>
<i className='fa fa-plus'></i>
<i className='fa fa-minus'></i>
</div>
</div>
<div className='theme-elements__body'>
{linkAndButtonElements}
</div>
</div>
<div className='row'>
{pasteBox}

2
web/react/components/user_settings/user_settings_theme.jsx
View File

@@ -182,7 +182,6 @@ export default class ThemeSetting extends React.Component {
if (displayCustom) {
custom = (
<div key='customThemeChooser'>
<br/>
<CustomThemeChooser
theme={this.state.theme}
updateTheme={this.updateTheme}
@@ -241,7 +240,6 @@ export default class ThemeSetting extends React.Component {
defaultMessage='Custom Theme'
/>
</label>
<br/>
</div>
);

25
web/react/utils/constants.jsx
View File

@@ -189,8 +189,8 @@ export default {
sidebarHeaderTextColor: '#FFFFFF',
onlineIndicator: '#7DBE00',
awayIndicator: '#DCBD4E',
mentionBj: '#136197',
mentionColor: '#bfcde8',
mentionBj: '#FBFBFB',
mentionColor: '#2071A7',
centerChannelBg: '#f2f4f8',
centerChannelColor: '#333333',
newMessageSeparator: '#FF8800',
@@ -276,86 +276,107 @@ export default {
},
THEME_ELEMENTS: [
{
group: 'sidebarElements',
id: 'sidebarBg',
uiName: 'Sidebar BG'
},
{
group: 'sidebarElements',
id: 'sidebarText',
uiName: 'Sidebar Text'
},
{
group: 'sidebarElements',
id: 'sidebarHeaderBg',
uiName: 'Sidebar Header BG'
},
{
group: 'sidebarElements',
id: 'sidebarHeaderTextColor',
uiName: 'Sidebar Header Text'
},
{
group: 'sidebarElements',
id: 'sidebarUnreadText',
uiName: 'Sidebar Unread Text'
},
{
group: 'sidebarElements',
id: 'sidebarTextHoverBg',
uiName: 'Sidebar Text Hover BG'
},
{
group: 'sidebarElements',
id: 'sidebarTextActiveBorder',
uiName: 'Sidebar Text Active Border'
},
{
group: 'sidebarElements',
id: 'sidebarTextActiveColor',
uiName: 'Sidebar Text Active Color'
},
{
group: 'sidebarElements',
id: 'onlineIndicator',
uiName: 'Online Indicator'
},
{
group: 'sidebarElements',
id: 'awayIndicator',
uiName: 'Away Indicator'
},
{
group: 'sidebarElements',
id: 'mentionBj',
uiName: 'Mention Jewel BG'
},
{
group: 'sidebarElements',
id: 'mentionColor',
uiName: 'Mention Jewel Text'
},
{
group: 'centerChannelElements',
id: 'centerChannelBg',
uiName: 'Center Channel BG'
},
{
group: 'centerChannelElements',
id: 'centerChannelColor',
uiName: 'Center Channel Text'
},
{
group: 'centerChannelElements',
id: 'newMessageSeparator',
uiName: 'New Message Separator'
},
{
group: 'linkAndButtonElements',
id: 'linkColor',
uiName: 'Link Color'
},
{
group: 'linkAndButtonElements',
id: 'buttonBg',
uiName: 'Button BG'
},
{
group: 'linkAndButtonElements',
id: 'buttonColor',
uiName: 'Button Text'
},
{
group: 'centerChannelElements',
id: 'mentionHighlightBg',
uiName: 'Mention Highlight BG'
},
{
group: 'centerChannelElements',
id: 'mentionHighlightLink',
uiName: 'Mention Highlight Link'
},
{
group: 'centerChannelElements',
id: 'codeTheme',
uiName: 'Code Theme',
themes: [

4
web/react/utils/utils.jsx
View File

@@ -743,7 +743,7 @@ export function applyTheme(theme) {
changeCss('.date-separator .separator__hr, .modal-footer, .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
changeCss('.search-item-container, .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 1);
changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links, .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre, .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
@@ -753,7 +753,7 @@ export function applyTheme(theme) {
changeCss('code', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1);
changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1);
changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2);
changeCss('.search-help-popover .search-autocomplete__item:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
changeCss('.search-help-popover .search-autocomplete__item:hover, .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
}

4
web/sass-files/sass/partials/_post.scss
View File

@@ -396,8 +396,8 @@ body.ios {
.post-list__content {
display: table-cell;
vertical-align: bottom;
> div:last-child {
.dropdown-menu {
.dropdown-menu {
&.bottom {
top: auto;
bottom: 25px;
}

15
web/sass-files/sass/partials/_post_right.scss
View File

@@ -11,7 +11,15 @@
.post-right-comments-container {
position: relative;
padding: 0.7em 0 0;
.post {
&:first-child {
padding-top: 15px;
}
}
}
.post {
@@ -19,6 +27,11 @@
&.post--root {
padding-bottom: 1.2em;
border-bottom: 1px solid #ddd;
.post__body {
background: transparent !important;
}
}
.post__header {

8
web/sass-files/sass/partials/_responsive.scss
View File

@@ -92,12 +92,14 @@
font-size: 1em;
}
.date-separator.hovered--after:before, .new-separator.hovered--after:before {
.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after {
background: none !important;
}
.post {
background: none !important;
.post__dropdown {
line-height: 9px;
text-decoration: none;
@@ -114,6 +116,10 @@
}
.comment-icon__container {
visibility: visible;
}
.post-list__content & {
&:hover {

49
web/sass-files/sass/partials/_settings.scss
View File

@@ -144,7 +144,11 @@
select {
padding-right: 25px;
}
select::-ms-expand {
display: none;
}
&:before {
pointer-events: none;
position: absolute;
top: 11px;
right: 50px;
@@ -181,12 +185,57 @@
.theme-elements {
padding-left:15px;
.element {
margin-right:10px;
&:nth-child(2n) {
margin-right: 0;
}
}
}
.theme-elements__header {
margin: 10px 20px 0px 0;
border-bottom: 1px solid #ccc;
padding: 5px 0 10px;
font-size: em(13.5px);
font-weight: 600;
cursor: pointer;
.fa-minus {
display: none;
}
&.open {
.fa-minus {
display: inline-block;
}
.fa-plus {
display: none;
}
}
.header__icon {
float: right;
@include opacity(0.5);
}
}
.theme-elements__body {
padding-top: 5px;
display: none;
@include legacy-pie-clearfix;
background: rgba(255, 255, 255, 0.05);
padding: 20px 0 0 20px;
margin: 0 20px 0 0;
@include border-radius(0 0 3px 3px);
}
.custom-label {
white-space: nowrap;
font-weight: normal;
font-size: 12px;
width: 100%;