diff options
author | Corey Hulen <corey@hulen.com> | 2015-12-14 15:27:07 -0800 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2015-12-14 15:27:07 -0800 |
commit | 6c7c04f38d0485dadcd7dd0ea2ba3a95bdfde448 (patch) | |
tree | bea4500f130fad966863e3969504e87339ac9c18 /web | |
parent | 8392e5ecc4b95af18529bd6ab4fe69fbb24dd17f (diff) | |
parent | 1e9f26baac5be61a7d3c080f81feba056e1eb5fc (diff) | |
download | chat-6c7c04f38d0485dadcd7dd0ea2ba3a95bdfde448.tar.gz chat-6c7c04f38d0485dadcd7dd0ea2ba3a95bdfde448.tar.bz2 chat-6c7c04f38d0485dadcd7dd0ea2ba3a95bdfde448.zip |
Merge pull request #1711 from asaadmahmoodspin/code-themes
Multiple UI Improvements
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/user_settings/custom_theme_chooser.jsx | 22 | ||||
-rw-r--r-- | web/react/utils/constants.jsx | 46 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_docs.scss | 19 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_popover.scss | 4 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_sidebar--right.scss | 2 | ||||
-rw-r--r-- | web/sass-files/sass/styles.scss | 3 | ||||
-rw-r--r-- | web/static/images/themes/code_themes/githubLarge.png | bin | 0 -> 83246 bytes | |||
-rw-r--r-- | web/static/images/themes/code_themes/monokaiLarge.png | bin | 0 -> 82658 bytes | |||
-rw-r--r-- | web/static/images/themes/code_themes/solarized_darkLarge.png | bin | 0 -> 81942 bytes | |||
-rw-r--r-- | web/static/images/themes/code_themes/solarized_lightLarge.png | bin | 0 -> 82868 bytes | |||
-rw-r--r-- | web/templates/docs.html | 2 |
11 files changed, 73 insertions, 25 deletions
diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx index 35f836adb..778c74c23 100644 --- a/web/react/components/user_settings/custom_theme_chooser.jsx +++ b/web/react/components/user_settings/custom_theme_chooser.jsx @@ -3,6 +3,9 @@ import Constants from '../../utils/constants.jsx'; +const OverlayTrigger = ReactBootstrap.OverlayTrigger; +const Popover = ReactBootstrap.Popover; + export default class CustomThemeChooser extends React.Component { constructor(props) { super(props); @@ -72,6 +75,19 @@ export default class CustomThemeChooser extends React.Component { ); }); + var popoverContent = ( + <Popover + bsStyle='info' + id='code-popover' + className='code-popover' + > + <img + width='200' + src={'/static/images/themes/code_themes/' + theme[element.id] + 'Large.png'} + /> + </Popover> + ); + elements.push( <div className='col-sm-4 form-group' @@ -90,11 +106,17 @@ export default class CustomThemeChooser extends React.Component { > {codeThemeOptions} </select> + <OverlayTrigger + placement='top' + overlay={popoverContent} + ref='headerOverlay' + > <span className='input-group-addon'> <img src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'} /> </span> + </OverlayTrigger> </div> </div> ); diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index d23c18b5d..5f027a409 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -166,29 +166,6 @@ export default { UPDATE_TYPING_MS: 5000, THEMES: { default: { - type: 'Mattermost', - sidebarBg: '#fafafa', - sidebarText: '#333333', - sidebarUnreadText: '#333333', - sidebarTextHoverBg: '#e6f2fa', - sidebarTextActiveBorder: '#378FD2', - sidebarTextActiveColor: '#111111', - sidebarHeaderBg: '#2389d7', - sidebarHeaderTextColor: '#ffffff', - onlineIndicator: '#7DBE00', - mentionBj: '#2389d7', - mentionColor: '#ffffff', - centerChannelBg: '#ffffff', - centerChannelColor: '#333333', - newMessageSeparator: '#FF8800', - linkColor: '#2389d7', - buttonBg: '#2389d7', - buttonColor: '#FFFFFF', - mentionHighlightBg: '#fff2bb', - mentionHighlightLink: '#2f81b7', - codeTheme: 'github' - }, - organization: { type: 'Organization', sidebarBg: '#2071a7', sidebarText: '#fff', @@ -211,6 +188,29 @@ export default { mentionHighlightLink: '#2f81b7', codeTheme: 'github' }, + mattermost: { + type: 'Mattermost', + sidebarBg: '#fafafa', + sidebarText: '#333333', + sidebarUnreadText: '#333333', + sidebarTextHoverBg: '#e6f2fa', + sidebarTextActiveBorder: '#378FD2', + sidebarTextActiveColor: '#111111', + sidebarHeaderBg: '#2389d7', + sidebarHeaderTextColor: '#ffffff', + onlineIndicator: '#7DBE00', + mentionBj: '#2389d7', + mentionColor: '#ffffff', + centerChannelBg: '#ffffff', + centerChannelColor: '#333333', + newMessageSeparator: '#FF8800', + linkColor: '#2389d7', + buttonBg: '#2389d7', + buttonColor: '#FFFFFF', + mentionHighlightBg: '#fff2bb', + mentionHighlightLink: '#2f81b7', + codeTheme: 'github' + }, mattermostDark: { type: 'Mattermost Dark', sidebarBg: '#1B2C3E', diff --git a/web/sass-files/sass/partials/_docs.scss b/web/sass-files/sass/partials/_docs.scss new file mode 100644 index 000000000..f4e7cc314 --- /dev/null +++ b/web/sass-files/sass/partials/_docs.scss @@ -0,0 +1,19 @@ +@charset "UTF-8"; + +.docs__page { + line-height: 1.7; + padding-bottom: 20px; + + > div { + width: 1170px; + margin: 0 auto; + padding: 0 15px; + max-width: 100%; + } + + h1.markdown__heading { + border-bottom: 1px solid #ddd; + padding-bottom: 1rem; + margin: 1em 0 1em; + } +}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss index bc55b7ff7..1ae07fe5b 100644 --- a/web/sass-files/sass/partials/_popover.scss +++ b/web/sass-files/sass/partials/_popover.scss @@ -10,6 +10,10 @@ display: inline-block; } +.code-popover .popover-content { + padding: 5px; +} + .user-popover__image { margin: 0 0 10px; @include border-radius(128px); diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss index f328f0971..f6c8d37a9 100644 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ b/web/sass-files/sass/partials/_sidebar--right.scss @@ -8,7 +8,7 @@ padding: 0; background: #fff; @include single-transition(transform, 0.5s, ease); - right: -320px; + right: -400px; &.move--left { right: 0; diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index c93372175..7bf3574d2 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -49,6 +49,9 @@ // Responsive Css @import "partials/responsive"; +// Docs Css +@import "partials/docs"; + // Standalone Css @import "partials/oauth"; diff --git a/web/static/images/themes/code_themes/githubLarge.png b/web/static/images/themes/code_themes/githubLarge.png Binary files differnew file mode 100644 index 000000000..cffc6e012 --- /dev/null +++ b/web/static/images/themes/code_themes/githubLarge.png diff --git a/web/static/images/themes/code_themes/monokaiLarge.png b/web/static/images/themes/code_themes/monokaiLarge.png Binary files differnew file mode 100644 index 000000000..7224950af --- /dev/null +++ b/web/static/images/themes/code_themes/monokaiLarge.png diff --git a/web/static/images/themes/code_themes/solarized_darkLarge.png b/web/static/images/themes/code_themes/solarized_darkLarge.png Binary files differnew file mode 100644 index 000000000..582df48f9 --- /dev/null +++ b/web/static/images/themes/code_themes/solarized_darkLarge.png diff --git a/web/static/images/themes/code_themes/solarized_lightLarge.png b/web/static/images/themes/code_themes/solarized_lightLarge.png Binary files differnew file mode 100644 index 000000000..d2c2702fb --- /dev/null +++ b/web/static/images/themes/code_themes/solarized_lightLarge.png diff --git a/web/templates/docs.html b/web/templates/docs.html index 21659e810..0e0f51648 100644 --- a/web/templates/docs.html +++ b/web/templates/docs.html @@ -7,7 +7,7 @@ <div class="inner__wrap"> <div class="row content"> <div class="col-sm-12"> - <div id="docs"></div> + <div class="docs__page" id="docs"></div> </div> <div class="footer-push"></div> </div> |