summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/react/components/user_settings/custom_theme_chooser.jsx108
-rw-r--r--web/react/components/user_settings/user_settings_theme.jsx2
-rw-r--r--web/react/utils/constants.jsx25
-rw-r--r--web/react/utils/utils.jsx4
-rw-r--r--web/sass-files/sass/partials/_responsive.scss8
-rw-r--r--web/sass-files/sass/partials/_settings.scss50
6 files changed, 183 insertions, 14 deletions
diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 2d88a3650..242615bc0 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/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 if (element.group === 'centerChannelElements') {
+ centerChannelElements.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>
+ );
+ } 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 {
- elements.push(
+ linkAndButtonElements.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>
@@ -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}
diff --git a/web/react/components/user_settings/user_settings_theme.jsx b/web/react/components/user_settings/user_settings_theme.jsx
index 34c688db1..74975d115 100644
--- a/web/react/components/user_settings/user_settings_theme.jsx
+++ b/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>
);
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 428549d57..766a86686 100644
--- a/web/react/utils/constants.jsx
+++ b/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: [
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 7f124149d..bdf68fc03 100644
--- a/web/react/utils/utils.jsx
+++ b/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);
}
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 2374a9dbb..1a8e3f374 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/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 {
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index de7df403f..acec24231 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/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%;
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-30 13:21:42 +0000