Merge pull request #123 from GetStream/improve-docs

szuperaz · web-flow · commit ce2500115354 · 2021-11-09T14:43:35.000+01:00
Improve docs
diff --git a/docusaurus/docs/Angular/assets/message-actions-screenshot.png b/docusaurus/docs/Angular/assets/message-actions-screenshot.png
diff --git a/docusaurus/docs/Angular/components/attachment-list.mdx b/docusaurus/docs/Angular/components/attachment-list.mdx
@@ -1,6 +1,6 @@
 ---
 id: attachment-list
-sidebar_position: 8
+sidebar_position: 2
 title: Attachments
 ---
 
diff --git a/docusaurus/docs/Angular/components/channel-header.mdx b/docusaurus/docs/Angular/components/channel-header.mdx
@@ -1,12 +1,12 @@
 ---
 id: channel-header
-sidebar_position: 12
+sidebar_position: 4
 title: Channel header
 ---
 
 import ChannelHeaderScreenshot from "../assets/channel-header-screenshot.png";
 
-The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about the difference between members and watchers [here](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members).
+The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members) in the platform documentation.
 
 **Example 1** - Channel header:
 
@@ -26,7 +26,7 @@ If you want to, you can create your own custom channel header, here is how to us
 </stream-channel>
 ```
 
-If you create your own channel header, you can use the [`ChannelService`](../services/channel.mdx) to access the currently active channel. Please note that, the default channel header also contains the menu button to [toggle the channel list](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts). Here is a simple implementation of a custom channel header to guide you:
+If you create your own channel header, you can use the [`ChannelService`](../services/channel.mdx) to access the currently active channel. Please note that, the default channel header also contains the menu button to [toggle the channel list](../services/channel-list-toggle.mdx). Here is a simple implementation of a custom channel header to guide you:
 
 ```typescript
 @Component({
diff --git a/docusaurus/docs/Angular/components/channel-list.mdx b/docusaurus/docs/Angular/components/channel-list.mdx
@@ -1,14 +1,14 @@
 ---
 id: channel_list
-sidebar_position: 4
+sidebar_position: 5
 title: Channel list
 ---
 
 The `ChannelList` component renders the list of channels.
 
 The `ChannelList` displays channels using pagination, new channels are loaded if the user clicks the "Load more" button.
 
-The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the `ChannelHeader` component.
+The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the [`ChannelHeader`](./channel-header.mdx) component.
 
 ## Customization
 
@@ -32,7 +32,7 @@ Other building blocks, that you might find useful:
 
 ### Toggle
 
-The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the `ChannelHeader` component. The open/close mechanism is implemented by the [`ChannelListToggleService`](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts).
+The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the `ChannelHeader` component. The open/close mechanism is implemented by the [`ChannelListToggleService`](../services/channel-list-toggle.mdx).
 
 ### Loading indicator
 
@@ -45,7 +45,7 @@ The `ChannelList` component uses the [`Icon`](./icons.mdx) component to display
 
 **Example 2** - Using a custom channel preview component
 
-If you only want to customize the channel preview items (not the whole list), see example [here](./channel-preview.mdx/#customization).
+If you only want to customize the channel preview items (not the whole list), see the [channel preview customization](./channel-preview.mdx/#customization) guide.
 
 ## Inputs
 
diff --git a/docusaurus/docs/Angular/components/channel-preview.mdx b/docusaurus/docs/Angular/components/channel-preview.mdx
@@ -1,6 +1,6 @@
 ---
 id: channel-preview
-sidebar_position: 5
+sidebar_position: 6
 title: Channel preview
 ---
 
diff --git a/docusaurus/docs/Angular/components/channel.mdx b/docusaurus/docs/Angular/components/channel.mdx
@@ -0,0 +1,23 @@
+---
+id: channel
+sidebar_position: 3
+title: Channel
+---
+
+The `Channel` component is a container component that displays the [`ChannelHeader`](./channel-header.mdx), [`MessageList`](./message-list.mdx), [`NotificationList`](./notifications.mdx) and [`MessageInput`](./message-input.mdx) components.
+
+## Customization
+
+If you want to create a custom channel component, here is how to use it:
+
+```html
+<div id="root">
+  <stream-channel-list></stream-channel-list>
+  <custom-channel>
+    <stream-channel-header></stream-channel-header>
+    <stream-message-list></stream-message-list>
+    <stream-notification-list></stream-notification-list>
+    <stream-message-input></stream-message-input>
+  </custom-channel>
+</div>
+```
diff --git a/docusaurus/docs/Angular/components/icons.mdx b/docusaurus/docs/Angular/components/icons.mdx
@@ -1,6 +1,6 @@
 ---
 id: icon
-sidebar_position: 10
+sidebar_position: 7
 title: Icons
 ---
 
@@ -27,7 +27,7 @@ export class CustomMessageComponent {
 
 ### <div class="label required basic">Required</div> icon
 
-The icon to display, the list of supported icons can be found [here](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/icon/icon.component.ts).
+The icon to display, the list of [supported icons](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/icon/icon.component.ts) can be found on GitHub.
 
 | Type                                                                                                                               |
 | ---------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/docusaurus/docs/Angular/components/loading-indicator.mdx b/docusaurus/docs/Angular/components/loading-indicator.mdx
@@ -1,6 +1,6 @@
 ---
 id: loading-indicator
-sidebar_position: 9
+sidebar_position: 8
 title: Loading indicator
 ---
 
diff --git a/docusaurus/docs/Angular/components/message-actions.mdx b/docusaurus/docs/Angular/components/message-actions.mdx
@@ -1,6 +1,6 @@
 ---
 id: message-actions
-sidebar_position: 6
+sidebar_position: 10
 title: Message actions
 ---
 
diff --git a/docusaurus/docs/Angular/components/message-list.mdx b/docusaurus/docs/Angular/components/message-list.mdx
@@ -1,6 +1,6 @@
 ---
 id: message_list
-sidebar_position: 3
+sidebar_position: 12
 title: Message list
 ---
 
@@ -47,7 +47,7 @@ Message group styles makes the message list more readable, by grouping messages
 
 **Example 2** - Using a custom message component
 
-If you only want to customize the messages (not the whole list), see example [here](./message.mdx/#customization).
+If you only want to customize the messages (not the whole list), see the [message customization guide](./message.mdx/#customization).
 
 ## Inputs
 
diff --git a/docusaurus/docs/Angular/components/message-reactions.mdx b/docusaurus/docs/Angular/components/message-reactions.mdx
@@ -1,13 +1,13 @@
 ---
 id: message-reactions
-sidebar_position: 7
+sidebar_position: 13
 title: Message reactions
 ---
 
 import MessageReactionsScreenshot from "../assets/message-reactions-screenshot.png";
 import MessageReactionsSelectorScreenshot from "../assets/message-reactions-selector-screenshot.png";
 
-The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about message reactions [here](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript).
+The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
 
 **Example 1** - displaying reactions of a message:
 
diff --git a/docusaurus/docs/Angular/components/message.mdx b/docusaurus/docs/Angular/components/message.mdx
@@ -1,6 +1,6 @@
 ---
 id: message
-sidebar_position: 2
+sidebar_position: 9
 title: Message
 ---
 
@@ -89,7 +89,7 @@ The `Message` component uses the [`Icon`](./icons.mdx) component to display icon
 
 ### enabledMessageActions
 
-The list of actions that are enabled, more info can be found [here](./message-actions.mdx).
+The list of [actions that are enabled](./message-actions.mdx).
 
 | Type            | Default  |
 | --------------- | -------- |
diff --git a/docusaurus/docs/Angular/components/notifications.mdx b/docusaurus/docs/Angular/components/notifications.mdx
@@ -1,6 +1,6 @@
 ---
 id: notifications
-sidebar_position: 12
+sidebar_position: 14
 title: Notifications
 ---
 
diff --git a/docusaurus/docs/Angular/services/channel-list-toggle.mdx b/docusaurus/docs/Angular/services/channel-list-toggle.mdx
@@ -0,0 +1,75 @@
+---
+id: channel-list-toggle
+sidebar_position: 3
+title: Channel list toggle service
+---
+
+The `ChannelListToggleService` can be used to toggle the channel list.
+
+# Overview
+
+## isOpen$
+
+A stream that tells if the channel list is currently opened or closed.
+
+## open
+
+Opens the channel list.
+
+### Params
+
+None
+
+### Returns
+
+void
+
+## close
+
+Closes the channel list.
+
+### Params
+
+None
+
+### Returns
+
+void
+
+## toggle
+
+Opens the channel list if it was closed, and closes if it was opened.
+
+### Params
+
+None
+
+### Returns
+
+void
+
+## setMenuElement
+
+The channel list element, on mobile screen size if the user opens the channel list, and clicks outside, the service automatically closes the channel list.
+
+### Params:
+
+| Name    | Type        | Description                          | Default |
+| ------- | ----------- | ------------------------------------ | ------- |
+| element | HTMLElement | The root element of the channel list | -       |
+
+### Returns
+
+void
+
+## channelSelected
+
+Tells the service that a channel was selected, if on mobile, the channel list will be closed.
+
+### Params
+
+None
+
+### Returns
+
+void
diff --git a/docusaurus/docs/Angular/services/channel.mdx b/docusaurus/docs/Angular/services/channel.mdx
@@ -1,6 +1,6 @@
 ---
 id: channel
-sidebar_position: 2
+sidebar_position: 1
 title: Channel service
 ---
 
diff --git a/docusaurus/docs/Angular/services/chat-client.mdx b/docusaurus/docs/Angular/services/chat-client.mdx
@@ -1,6 +1,6 @@
 ---
 id: chat-client
-sidebar_position: 1
+sidebar_position: 2
 title: Chat client
 ---
 
diff --git a/docusaurus/docs/Angular/services/internalization.mdx b/docusaurus/docs/Angular/services/internalization.mdx
@@ -0,0 +1,24 @@
+---
+id: internalization
+sidebar_position: 4
+title: Internalization service
+---
+
+The `StreamI18nService` can be used to customize the labels of the chat UI. Our [translation guide](../concepts/translation.mdx) covers this topic in detail.
+
+# Overview
+
+## setTranslation
+
+Registers the translation to the [ngx-translate](https://github.com/ngx-translate/core) TranslateService.
+
+### Params
+
+| Name      | Type   | Description                                                                       | Default |
+| --------- | ------ | --------------------------------------------------------------------------------- | ------- |
+| lang      | String | The language key to register the translation to                                   | 'en'    |
+| overrides | Object | An object which keys are translation keys, and the values are custom translations | {}      |
+
+### Returns
+
+void
diff --git a/docusaurus/docs/Angular/services/notifications.mdx b/docusaurus/docs/Angular/services/notifications.mdx
@@ -1,6 +1,6 @@
 ---
 id: notifications
-sidebar_position: 3
+sidebar_position: 5
 title: Notification service
 ---
 
diff --git a/docusaurus/docs/Angular/services/theme.mdx b/docusaurus/docs/Angular/services/theme.mdx
@@ -0,0 +1,65 @@
+---
+id: theme
+sidebar_position: 6
+title: Theme service
+---
+
+The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [themeing guide](../concepts/themeing-and-css.mdx) gives a complete overview about the topic.
+
+# Overview
+
+## theme$
+
+A Subject that can be used to get or set the currently active theme.
+
+## customLightThemeVariables
+
+A getter that returns the currently set custom light theme variables.
+
+### Params
+
+None
+
+### Returns
+
+An object where the keys are theme variables, and the values are the currently set CSS values.
+
+## customLightThemeVariables
+
+A setter that can be used to overwrite the values of the CSS theme variables of the light theme.
+
+### Params
+
+| Name     | Type   | Description                                                                  | Default |
+| -------- | ------ | ---------------------------------------------------------------------------- | ------- |
+| variable | Object | An object where the keys are theme variables, and the values are CSS values. | -       |
+
+### Returns
+
+void
+
+## customDarkThemeVariables
+
+A getter that returns the currently set custom dark theme variables.
+
+### Params
+
+None
+
+### Returns
+
+An object where the keys are theme variables, and the values are the currently set CSS values.
+
+## customDarkThemeVariables
+
+A setter that can be used to overwrite the values of the CSS theme variables of the dark theme.
+
+### Params
+
+| Name     | Type   | Description                                                                  | Default |
+| -------- | ------ | ---------------------------------------------------------------------------- | ------- |
+| variable | Object | An object where the keys are theme variables, and the values are CSS values. | -       |
+
+### Returns
+
+void
diff --git a/introduction/introduction.md b/introduction/introduction.md
