From 97495195802a11f88916a86dd381fb1477b78cbe Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 11 Dec 2015 23:58:38 +0500 Subject: Multiple UI Improvements --- doc/help/Messaging.md | 34 +++++++-------- .../user_settings/custom_theme_chooser.jsx | 22 ++++++++++ web/react/utils/constants.jsx | 46 ++++++++++----------- web/sass-files/sass/partials/_docs.scss | 19 +++++++++ web/sass-files/sass/partials/_popover.scss | 4 ++ web/sass-files/sass/styles.scss | 3 ++ .../images/themes/code_themes/githubLarge.png | Bin 0 -> 83246 bytes .../images/themes/code_themes/monokaiLarge.png | Bin 0 -> 82658 bytes .../themes/code_themes/solarized_darkLarge.png | Bin 0 -> 81942 bytes .../themes/code_themes/solarized_lightLarge.png | Bin 0 -> 82868 bytes web/templates/docs.html | 2 +- 11 files changed, 89 insertions(+), 41 deletions(-) create mode 100644 web/sass-files/sass/partials/_docs.scss create mode 100644 web/static/images/themes/code_themes/githubLarge.png create mode 100644 web/static/images/themes/code_themes/monokaiLarge.png create mode 100644 web/static/images/themes/code_themes/solarized_darkLarge.png create mode 100644 web/static/images/themes/code_themes/solarized_lightLarge.png diff --git a/doc/help/Messaging.md b/doc/help/Messaging.md index 548892650..2063ad41c 100644 --- a/doc/help/Messaging.md +++ b/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. -- **Delete:** Deletes the message so it is no longer visible. Team Administrators and System Administrators can also delete another user's message. +- **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. - **Edit:** Lets you edit your own message. 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 = ( + + + + ); + elements.push(
{codeThemeOptions} + +
); 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..6c21055d5 --- /dev/null +++ b/web/sass-files/sass/partials/_docs.scss @@ -0,0 +1,19 @@ +@charset "UTF-8"; + +.docks__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/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 new file mode 100644 index 000000000..cffc6e012 Binary files /dev/null and b/web/static/images/themes/code_themes/githubLarge.png differ diff --git a/web/static/images/themes/code_themes/monokaiLarge.png b/web/static/images/themes/code_themes/monokaiLarge.png new file mode 100644 index 000000000..7224950af Binary files /dev/null and b/web/static/images/themes/code_themes/monokaiLarge.png differ diff --git a/web/static/images/themes/code_themes/solarized_darkLarge.png b/web/static/images/themes/code_themes/solarized_darkLarge.png new file mode 100644 index 000000000..582df48f9 Binary files /dev/null and b/web/static/images/themes/code_themes/solarized_darkLarge.png differ diff --git a/web/static/images/themes/code_themes/solarized_lightLarge.png b/web/static/images/themes/code_themes/solarized_lightLarge.png new file mode 100644 index 000000000..d2c2702fb Binary files /dev/null and b/web/static/images/themes/code_themes/solarized_lightLarge.png differ diff --git a/web/templates/docs.html b/web/templates/docs.html index 21659e810..2ec6ce818 100644 --- a/web/templates/docs.html +++ b/web/templates/docs.html @@ -7,7 +7,7 @@
-
+
-- cgit v1.2.3-1-g7c22 From def79636f8e41204c32bf4b628b254aec5377ef5 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 14 Dec 2015 18:24:59 +0500 Subject: Updating the naming for the docs page --- web/sass-files/sass/partials/_docs.scss | 2 +- web/templates/docs.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/sass-files/sass/partials/_docs.scss b/web/sass-files/sass/partials/_docs.scss index 6c21055d5..f4e7cc314 100644 --- a/web/sass-files/sass/partials/_docs.scss +++ b/web/sass-files/sass/partials/_docs.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -.docks__page { +.docs__page { line-height: 1.7; padding-bottom: 20px; diff --git a/web/templates/docs.html b/web/templates/docs.html index 2ec6ce818..0e0f51648 100644 --- a/web/templates/docs.html +++ b/web/templates/docs.html @@ -7,7 +7,7 @@
-
+
-- cgit v1.2.3-1-g7c22 From 7a0545d4c57cae81061267393fe519ec6b0cdd9b Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 14 Dec 2015 19:06:27 +0500 Subject: Fixing sidebar--right --- web/sass-files/sass/partials/_sidebar--right.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss index f328f0971..aee826094 100644 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ b/web/sass-files/sass/partials/_sidebar--right.scss @@ -8,11 +8,7 @@ padding: 0; background: #fff; @include single-transition(transform, 0.5s, ease); - right: -320px; - - &.move--left { - right: 0; - } + right: 0; .post-body { -- cgit v1.2.3-1-g7c22 From 1e9f26baac5be61a7d3c080f81feba056e1eb5fc Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 14 Dec 2015 19:54:39 +0500 Subject: Removing sidebar right fix --- web/sass-files/sass/partials/_sidebar--right.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss index aee826094..f6c8d37a9 100644 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ b/web/sass-files/sass/partials/_sidebar--right.scss @@ -8,7 +8,11 @@ padding: 0; background: #fff; @include single-transition(transform, 0.5s, ease); - right: 0; + right: -400px; + + &.move--left { + right: 0; + } .post-body { -- cgit v1.2.3-1-g7c22