summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--doc/help/Messaging.md34
-rw-r--r--web/react/components/user_settings/custom_theme_chooser.jsx22
-rw-r--r--web/react/utils/constants.jsx46
-rw-r--r--web/sass-files/sass/partials/_docs.scss19
-rw-r--r--web/sass-files/sass/partials/_popover.scss4
-rw-r--r--web/sass-files/sass/styles.scss3
-rw-r--r--web/static/images/themes/code_themes/githubLarge.pngbin0 -> 83246 bytes
-rw-r--r--web/static/images/themes/code_themes/monokaiLarge.pngbin0 -> 82658 bytes
-rw-r--r--web/static/images/themes/code_themes/solarized_darkLarge.pngbin0 -> 81942 bytes
-rw-r--r--web/static/images/themes/code_themes/solarized_lightLarge.pngbin0 -> 82868 bytes
-rw-r--r--web/templates/docs.html2
11 files changed, 89 insertions, 41 deletions
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 = (
+ <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..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
--- /dev/null
+++ b/web/static/images/themes/code_themes/githubLarge.png
Binary files 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
--- /dev/null
+++ b/web/static/images/themes/code_themes/monokaiLarge.png
Binary files 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
--- /dev/null
+++ b/web/static/images/themes/code_themes/solarized_darkLarge.png
Binary files 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
--- /dev/null
+++ b/web/static/images/themes/code_themes/solarized_lightLarge.png
Binary files 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 @@
<div class="inner__wrap">
<div class="row content">
<div class="col-sm-12">
- <div id="docs"></div>
+ <div class="docks__page" id="docs"></div>
</div>
<div class="footer-push"></div>
</div>
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-01 11:27:11 +0000