Merge pull request #1711 from asaadmahmoodspin/code-themes

Multiple UI Improvements

doc/help/Messaging.md

@@ -1,18 +1,18 @@
 # Messaging
 
-## Writing Messages
+### Writing Messages
 
-You can write messages using the input box with the text "Write a message..." at the bottom of Mattermost. 
+You can write messages using the input box with the text "Write a message..." at the bottom of Mattermost.
 
-Press **ENTER** to send a message. Use **Shift+ENTER** to create a new line without sending a message. 
+Press **ENTER** to send a message. Use **Shift+ENTER** to create a new line without sending a message.
 
-## Formatting Messages
+### Formatting Messages
 
-Mattermost messages are formatted using a standard called "markdown". Here are examples: 
+Mattermost messages are formatted using a standard called "markdown". Here are examples:
 
 | Text Entered | How it appears |
 |:---------------|:---------------|
-|`**bold**`| **bold** |   
+|`**bold**`| **bold** |
 | `_italic_`|_italic_|
 |`[hyperlink](http://mattermost.org)`|[hyperlink](http://mattermost.org)|
 |`![embedded image](https://travis-ci.org/mattermost/platform.svg)`|![embedded image](https://travis-ci.org/mattermost/platform.svg)|
@@ -21,27 +21,27 @@ Mattermost messages are formatted using a standard called "markdown". Here are e
 Emojis provided free from [Emoji One](http://emojione.com/). Check out a full list of Emojis [here](http://emoji.codes/).
 
 
-## Mentioning Teammates
+### Mentioning Teammates
 
-You can mention a teammate by using the `@` symbol plus their username to send them a special notification to draw their attention. 
+You can mention a teammate by using the `@` symbol plus their username to send them a special notification to draw their attention.
 
-For example, you might write: 
+For example, you might write:
 
 ```
 @alice how did your interview go with the new candidate?
-``` 
+```
 
-Which sends a special mention notification to **alice** to check your message. 
+Which sends a special mention notification to **alice** to check your message.
 
-To mention a teammate, press `@` and you should see a list of team members who can be messaged. You can either type their username or use the **Up** and **Down** arrow keys and then **ENTER** to select them to be mentioned. 
+To mention a teammate, press `@` and you should see a list of team members who can be messaged. You can either type their username or use the **Up** and **Down** arrow keys and then **ENTER** to select them to be mentioned.
 
-You can configure how you'd like to be alerted about mentions of your username, your first name, your nickname, or other keywords from **Account Settings** > **Notifications** and you can set channel-specific preferences from **[Channel Name]** > **Notification Preferences** 
+You can configure how you'd like to be alerted about mentions of your username, your first name, your nickname, or other keywords from **Account Settings** > **Notifications** and you can set channel-specific preferences from **[Channel Name]** > **Notification Preferences**
 
-## Messages Dropdown Menu
+### Messages Dropdown Menu
 
-To get to the Messages Dropdown Menu, hover over a message and click on the [...] menu. This shows a dropdown list containing additional actions you can perform on a message: 
+To get to the Messages Dropdown Menu, hover over a message and click on the [...] menu. This shows a dropdown list containing additional actions you can perform on a message:
 
 - **Reply:** Opens up the sidebar so you can reply to a message in a comment thread.
-- **Permalink:** Creates a link to the message. Sharing this link with other users in the channel lets them view the linked message in the Message Archives. 
+- **Permalink:** Creates a link to the message. Sharing this link with other users in the channel lets them view the linked message in the Message Archives.
-- **Delete:** Deletes the message so it is no longer visible. Team Administrators and System Administrators can also delete another user's message. 
+- **Delete:** Deletes the message so it is no longer visible. Team Administrators and System Administrators can also delete another user's message.
 - **Edit:** Lets you edit your own message.

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

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',

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;
+	}
+}

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

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;

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";
 

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>