mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Multiple UI Improvements

Просмотр исходного кода
Этот коммит содержится в:
Asaad Mahmood
2016-02-15 19:37:06 +05:00
родитель 2ec3762fb2
Коммит 522ff67c63
6 изменённых файлов: 184 добавлений и 15 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

110
web/react/components/user_settings/custom_theme_chooser.jsx
Просмотреть файл

@@ -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,18 @@ class CustomThemeChooser extends React.Component {
this.props.updateTheme(theme);
}
toggleContent(e) {
e.stopPropagation();
$(e.target).next().slideToggle();
$(e.target).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 +195,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 +227,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 +317,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
Просмотреть файл

@@ -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
Просмотреть файл

@@ -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
Просмотреть файл

@@ -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);
}

8
web/sass-files/sass/partials/_responsive.scss
Просмотреть файл

@@ -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 {

50
web/sass-files/sass/partials/_settings.scss
Просмотреть файл

@@ -145,6 +145,7 @@
padding-right: 25px;
}
&:before {
pointer-events: none;
position: absolute;
top: 11px;
right: 50px;
@@ -181,12 +182,61 @@
.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;
div, span {
pointer-events: none;
}
.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%;