github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-12 00:43:43 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
41942357ed
discourse/plugins/chat/assets/stylesheets/common/index.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

72 lines
2.1 KiB
SCSS
Raw Normal View History

UX: Chat unread indicator refactor (#22040) * move the chat unread indicator to top to match the profile avatar indicator * add white border to profile avatar indicator (badge notification) to match chat indicator and userstatus styling * change `.urgent` to BEM * congregate all styling into mixin * update chat index to use mixin * update thread indicator to use mixin * update header indicator to use mixin --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com> Co-authored-by: Martin Brennan <martin@discourse.org>
2023-06-12 12:33:45 +08:00
@import "chat-unread-indicator";
FIX: moves chat height computation to a mixin (#21555) This commit also removes safe-area-inset-bottom when keyboard is displayed to avoid having a taller than needed space between composer and replying indicator.
2023-05-15 21:53:18 +08:00
@import "chat-height-mixin";
FEATURE: new jump to channel menu (#22383) This commit replaces two existing screens: - draft - channel selection modal Main features compared to existing solutions - features are now combined, meaning you can for example create multi users DM - it will show users with chat disabled - it shows unread state - hopefully a better look/feel - lots of small details and fixes... Other noticeable fixes - starting a DM with a user, even from the user card and clicking <kbd>Chat</kbd> will not show a green dot for the target user (or even the channel) until a message is actually sent - it should almost never do a full page reload anymore --------- Co-authored-by: Martin Brennan <mjrbrennan@gmail.com> Co-authored-by: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com> Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com> Co-authored-by: Mark VanLandingham <markvanlan@gmail.com>
2023-07-06 00:18:27 +08:00
@import "chat-thread-header-buttons";
DEV: properly namespace chat (#20690) This commit main goal was to comply with Zeitwerk and properly rely on autoloading. To achieve this, most resources have been namespaced under the `Chat` module. - Given all models are now namespaced with `Chat::` and would change the stored types in DB when using polymorphism or STI (single table inheritance), this commit uses various Rails methods to ensure proper class is loaded and the stored name in DB is unchanged, eg: `Chat::Message` model will be stored as `"ChatMessage"`, and `"ChatMessage"` will correctly load `Chat::Message` model. - Jobs are now using constants only, eg: `Jobs::Chat::Foo` and should only be enqueued this way Notes: - This commit also used this opportunity to limit the number of registered css files in plugin.rb - `discourse_dev` support has been removed within this commit and will be reintroduced later <!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-03-17 21:24:38 +08:00
@import "base-common";
@import "sidebar-extensions";
@import "chat-browse";
UX: improves composer and thread panel (#21210) This pull request is a full overhaul of the chat-composer and contains various improvements to the thread panel. They have been grouped in the same PR as lots of improvements/fixes to the thread panel needed an improved composer. This is meant as a first step. ### New features included in this PR - A resizable side panel - A clear dropzone area for uploads - A simplified design for image uploads, this is only a first step towards more redesign of this area in the future ### Notable fixes in this PR - Correct placeholder in thread panel - Allows to edit the last message of a thread with arrow up - Correctly focus composer when replying to a message - The reply indicator is added instantly in the channel when starting a thread - Prevents a large variety of bug where the composer could bug and prevent sending message or would clear your input while it has content ### Technical notes To achieve this PR, three important changes have been made: - `<ChatComposer>` has been fully rewritten and is now a glimmer component - The chat composer now takes a `ChatMessage` as input which can directly be used in other operations, it simplifies a lot of logic as we are always working a with a `ChatMessage` - `TextareaInteractor` has been created to wrap the existing `TextareaTextManipulation` mixin, it will make future migrations easier and allow us to have a less polluted `<ChatComposer>` Note ".chat-live-pane" has been renamed ".chat-channel" Design for upload dropzone is from @chapoi
2023-04-25 16:23:03 +08:00
@import "chat-channel";
DEV: properly namespace chat (#20690) This commit main goal was to comply with Zeitwerk and properly rely on autoloading. To achieve this, most resources have been namespaced under the `Chat` module. - Given all models are now namespaced with `Chat::` and would change the stored types in DB when using polymorphism or STI (single table inheritance), this commit uses various Rails methods to ensure proper class is loaded and the stored name in DB is unchanged, eg: `Chat::Message` model will be stored as `"ChatMessage"`, and `"ChatMessage"` will correctly load `Chat::Message` model. - Jobs are now using constants only, eg: `Jobs::Chat::Foo` and should only be enqueued this way Notes: - This commit also used this opportunity to limit the number of registered css files in plugin.rb - `discourse_dev` support has been removed within this commit and will be reintroduced later <!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-03-17 21:24:38 +08:00
@import "chat-channel-card";
@import "chat-channel-info";
@import "chat-channel-preview-card";
@import "chat-channel-title";
@import "chat-composer-dropdown";
@import "chat-composer-upload";
@import "chat-composer-uploads";
@import "chat-composer";
UX: implements new composer design (#21588) This is only the first steps of a redesign - redesigns the buttons to have a larger hitzone - generally bigger composer - clicking near textarea focuses the input - relies on the fact that safe-area-inset-bottom is set globally and doesn’t need to be set in sub components
2023-05-16 23:17:12 +08:00
@import "chat-composer-button";
DEV: properly namespace chat (#20690) This commit main goal was to comply with Zeitwerk and properly rely on autoloading. To achieve this, most resources have been namespaced under the `Chat` module. - Given all models are now namespaced with `Chat::` and would change the stored types in DB when using polymorphism or STI (single table inheritance), this commit uses various Rails methods to ensure proper class is loaded and the stored name in DB is unchanged, eg: `Chat::Message` model will be stored as `"ChatMessage"`, and `"ChatMessage"` will correctly load `Chat::Message` model. - Jobs are now using constants only, eg: `Jobs::Chat::Foo` and should only be enqueued this way Notes: - This commit also used this opportunity to limit the number of registered css files in plugin.rb - `discourse_dev` support has been removed within this commit and will be reintroduced later <!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-03-17 21:24:38 +08:00
@import "chat-drawer";
@import "chat-emoji-picker";
@import "chat-form";
@import "chat-index";
@import "chat-mention-warnings";
@import "chat-message-actions";
@import "chat-message-collapser";
@import "chat-message-images";
@import "chat-message-info";
@import "chat-message-left-gutter";
@import "chat-message-separator";
FEATURE: Initial chat thread indicator and disabling echo mode in channels (#21047) This commit introduces a new thread indicator for channels with `threading_enabled` set to true and the `enable_exp` site setting set to true. In addition, in the main channel stream we now hide all messages that are linked to threads except for the original message, disabling the concept of an "echo mode" for now, we may revisit this in future. We also remove the jigsaw puzzle "Open Thread" button for message actions, since the thread indicator can just be used instead. This also stops the `Chat::Publisher` from sending any messages related to chat messages that are linked to a thread, unless that chat message is the OM of the thread. A subsequent PR will link up all MessageBus events within the thread panel, and for the message indicators. Another subsequent PR will add the excerpt of the latest message in each thread, as well as the avatars of the users messaging in the thread. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-12 09:09:06 +08:00
@import "chat-message-thread-indicator";
DEV: properly namespace chat (#20690) This commit main goal was to comply with Zeitwerk and properly rely on autoloading. To achieve this, most resources have been namespaced under the `Chat` module. - Given all models are now namespaced with `Chat::` and would change the stored types in DB when using polymorphism or STI (single table inheritance), this commit uses various Rails methods to ensure proper class is loaded and the stored name in DB is unchanged, eg: `Chat::Message` model will be stored as `"ChatMessage"`, and `"ChatMessage"` will correctly load `Chat::Message` model. - Jobs are now using constants only, eg: `Jobs::Chat::Foo` and should only be enqueued this way Notes: - This commit also used this opportunity to limit the number of registered css files in plugin.rb - `discourse_dev` support has been removed within this commit and will be reintroduced later <!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-03-17 21:24:38 +08:00
@import "chat-message";
DEV: Introduce Chat Notices with publishing method (#22369)
2023-07-06 21:26:25 +08:00
@import "chat-notices";
DEV: properly namespace chat (#20690) This commit main goal was to comply with Zeitwerk and properly rely on autoloading. To achieve this, most resources have been namespaced under the `Chat` module. - Given all models are now namespaced with `Chat::` and would change the stored types in DB when using polymorphism or STI (single table inheritance), this commit uses various Rails methods to ensure proper class is loaded and the stored name in DB is unchanged, eg: `Chat::Message` model will be stored as `"ChatMessage"`, and `"ChatMessage"` will correctly load `Chat::Message` model. - Jobs are now using constants only, eg: `Jobs::Chat::Foo` and should only be enqueued this way Notes: - This commit also used this opportunity to limit the number of registered css files in plugin.rb - `discourse_dev` support has been removed within this commit and will be reintroduced later <!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-03-17 21:24:38 +08:00
@import "chat-onebox";
@import "chat-reply";
@import "chat-replying-indicator";
@import "chat-selection-manager";
@import "chat-side-panel";
@import "chat-skeleton";
@import "chat-tabs";
@import "chat-thread";
UX: improves composer and thread panel (#21210) This pull request is a full overhaul of the chat-composer and contains various improvements to the thread panel. They have been grouped in the same PR as lots of improvements/fixes to the thread panel needed an improved composer. This is meant as a first step. ### New features included in this PR - A resizable side panel - A clear dropzone area for uploads - A simplified design for image uploads, this is only a first step towards more redesign of this area in the future ### Notable fixes in this PR - Correct placeholder in thread panel - Allows to edit the last message of a thread with arrow up - Correctly focus composer when replying to a message - The reply indicator is added instantly in the channel when starting a thread - Prevents a large variety of bug where the composer could bug and prevent sending message or would clear your input while it has content ### Technical notes To achieve this PR, three important changes have been made: - `<ChatComposer>` has been fully rewritten and is now a glimmer component - The chat composer now takes a `ChatMessage` as input which can directly be used in other operations, it simplifies a lot of logic as we are always working a with a `ChatMessage` - `TextareaInteractor` has been created to wrap the existing `TextareaTextManipulation` mixin, it will make future migrations easier and allow us to have a less polluted `<ChatComposer>` Note ".chat-live-pane" has been renamed ".chat-channel" Design for upload dropzone is from @chapoi
2023-04-25 16:23:03 +08:00
@import "chat-side-panel-resizer";
@import "chat-upload-drop-zone";
DEV: properly namespace chat (#20690) This commit main goal was to comply with Zeitwerk and properly rely on autoloading. To achieve this, most resources have been namespaced under the `Chat` module. - Given all models are now namespaced with `Chat::` and would change the stored types in DB when using polymorphism or STI (single table inheritance), this commit uses various Rails methods to ensure proper class is loaded and the stored name in DB is unchanged, eg: `Chat::Message` model will be stored as `"ChatMessage"`, and `"ChatMessage"` will correctly load `Chat::Message` model. - Jobs are now using constants only, eg: `Jobs::Chat::Foo` and should only be enqueued this way Notes: - This commit also used this opportunity to limit the number of registered css files in plugin.rb - `discourse_dev` support has been removed within this commit and will be reintroduced later <!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-03-17 21:24:38 +08:00
@import "chat-transcript";
@import "core-extensions";
@import "dc-filter-input";
@import "full-page-chat-header";
@import "incoming-chat-webhooks";
@import "reviewable-chat-message";
FEATURE: Thread list initial UI (#21412) This commit adds an initial thread list UI. There are several limitations with this that will be addressed in future PRs: * There is no MessageBus reactivity, so e.g. if someone edits the original message of the thread it will not be reflected in the list. However if the thread title is updated the original message indicator will be updated. * There is no unread functionality for threads in the list, if new messages come into the thread there is no indicator in the UI. * There is no unread indicator on the actual button to open the thread list. * No pagination. In saying that, this is the functionality so far: * We show a list of the 50 threads that the user has most recently participated in (i.e. sent a message) for the channel in descending order. * Each thread we show a rich excerpt, the title, and the user who is the OM creator. * The title is editable by staff and by the OM creator. * Thread indicators show a title. We also replace emojis in the titles. * Thread list works in the drawer/mobile.
2023-05-10 17:42:32 +08:00
@import "chat-thread-list-item";
FIX: various fixes following channel height changes (#21553) - apply height on threads list - apply height on thread - correctly applies env(safe-area-inset-bottom)
2023-05-15 20:39:11 +08:00
@import "chat-threads-list";
UI: chat composer step 2 (#21641) - few improved alignments - displays emoji picker button inline on desktop - keeps composer focused when focusing dropdown button - align buttons to bottom when increasing height of textarea - max-height of textarea is now linked to the height of the screen Co-authored-by: chapoi <charlie@discourse.org>
2023-05-22 23:00:50 +08:00
@import "chat-composer-separator";
FEATURE: Improving thread list item and header (#21749) * Moved the settings cog from thread list to thread and put it in a new header component * Remove thread original message component, no longer needed and the list item and thread indicator styles/content will be quite different * Start adding content (unread indicator etc.) to the thread list item and changing structure to be more like designs * Serialize the last thread reply when opening the thread index, show in list and update with message bus
2023-05-29 15:11:55 +08:00
@import "chat-thread-header";
REFACTOR: composer/thread (#21910) This commit contains multiple changes to improve the composer behavior especially in the context of a thread: - Generally rename anything of the form `chatChannelThread...` to `chatThread...`` - Moves the textarea interactor instance inside the composer server - Improves the focus state and closing of panel related to the use of the Escape shortcut - Creates `Chat::ThreadList` as a component instead of having `Chat::Thread::ListItem` and others which could imply they were children of a the `Chat::Thread` component
2023-06-08 03:49:15 +08:00
@import "chat-thread-list-header";
FEATURE: Improving thread list item and header (#21749) * Moved the settings cog from thread list to thread and put it in a new header component * Remove thread original message component, no longer needed and the list item and thread indicator styles/content will be quite different * Start adding content (unread indicator etc.) to the thread list item and changing structure to be more like designs * Serialize the last thread reply when opening the thread index, show in list and update with message bus
2023-05-29 15:11:55 +08:00
@import "chat-thread-unread-indicator";
FEATURE: Thread indicator improvements and participants (#21909) This commit adds the initial part of thread indicator improvements: * Show the reply count, last reply date and excerpt, and the participants of the thread's avatars and count of additional participants * Add a participants component for the thread that can be reused for the list * Add a query class to get the thread participants * Live update the thread indicator more consistently with the last reply and participant details image image In subsequent PRs we will cache the participants since they do not change often, and improve the thread list further with participants. This commit also adds a showPresence boolean (default true) to ChatUserAvatar, since we don't want to show the online indicator for thread participants. --------- Co-authored-by: chapoi <charlie@discourse.org>
2023-06-15 08:49:27 +08:00
@import "chat-thread-participants";
REFACTOR: <ChatMessage> component (#22172) - Moves `<ChatMessageInfo />` to `<Chat::Message::Info />` - Moves `<ChatMessageAvatar />` to `<Chat::Message::Avatar />` - Moves `<ChatMessageLeftGutter />` to `<Chat::Message::LeftGutter />`, adds tests - Creates `<Chat::Message::Error />` - Creates `<Chat::Message::MentionWarning />`, adds tests and a styleguide - Creates a model for ChatMessageMentionWarning, adds fabricator for it - Keeps the enter/leave viewport logic inside the `<ChatMessage />` component instead of bubbling it to the channel and thread components - Adds a scale animation when clicking a reaction - Creates `chat/later-fn` modifier which accepts a function and a delay. It allows to call a function Xms after a component has been inserted, it's useful for animations. - Moves css code out of chat-message into relevant files - Deletes unused code <!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-06-19 15:50:54 +08:00
@import "chat-message-error";
FEATURE: new jump to channel menu (#22383) This commit replaces two existing screens: - draft - channel selection modal Main features compared to existing solutions - features are now combined, meaning you can for example create multi users DM - it will show users with chat disabled - it shows unread state - hopefully a better look/feel - lots of small details and fixes... Other noticeable fixes - starting a DM with a user, even from the user card and clicking <kbd>Chat</kbd> will not show a green dot for the target user (or even the channel) until a message is actually sent - it should almost never do a full page reload anymore --------- Co-authored-by: Martin Brennan <mjrbrennan@gmail.com> Co-authored-by: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com> Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com> Co-authored-by: Mark VanLandingham <markvanlan@gmail.com>
2023-07-06 00:18:27 +08:00
@import "chat-message-creator";
FIX: makes chat user avatar show presence by default (#22490) It's way more common to have presence enabled than disabled, so we should have been making it the default from start. This commit also changes the namespace of `<ChatUserAvatar />` into `<Chat::UserAvatar />` and refactors tests.
2023-07-10 15:36:20 +08:00
@import "chat-user-avatar";
DEV: makes chat modals use the new <DModal /> component (#22495) This commit also standardize the naming pattern of modals: `<Chat::Modal::FooBar />` and changes css class accordingly. Co-authored-by: David Taylor <david@taylorhq.com>
2023-07-10 19:43:33 +08:00
@import "chat-modal-new-message";
@import "chat-modal-archive-channel";
@import "chat-modal-edit-channel-description";
@import "chat-modal-create-channel";
@import "chat-modal-create-channel";
@import "chat-modal-channel-summary";
@import "chat-modal-move-message-to-channel";
FEATURE: thread pagination (#22624) Prior to this commit we were loading a large number of thread messages without any pagination. This commit attempts to fix this and also improves the following points: - code sharing between channels and threads: Attempts to reuse/share the code use in channels for threads. To make it possible part of this code has been extracted in dedicated helpers or has been improved to reduce the duplication needed. Examples of extracted helpers: - `stackingContextFix`: the ios hack for rendering bug when momentum scrolling is interrupted - `scrollListToMessage`, `scrollListToTop`, `scrollListToBottom`: a series of helper to correctly scroll to a specific position in the list of messages - better general performance of listing messages: One of the main changes which has been made is to remove the computation of visible message during scroll, it will only happen when needed (update last read for example). This constant recomputation of `message.visible` on intersection observer event while scrolling was consuming a lot of CPU time.
2023-07-27 15:57:03 +08:00
@import "chat-scroll-to-bottom";
UX: implements swipe on row channel (#23436) On mobile swiping a channel row will now show a "Remove" option. Holding this to the end will now remove this row from your list of followed direct message channels. Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2023-09-11 20:51:13 +08:00
@import "chat-channel-row";
UI: redesigned settings/members (#23804) This PR is a first step towards private groups. It redesigns settings/members area of a channel and also drops the "about" page which is now mixed into settings. This commit is also: - introducing chat-form, a small DSL to create forms, ideally I would want something in core for this - introducing a DToggleSwitch page object component to simplify testing toggles - migrating various components to gjs
2023-10-09 20:11:16 +08:00
@import "chat-channel-members";
@import "chat-channel-settings";
FEATURE: my threads page (#24771) This commit adds a new "My threads" link in sidebar and drawer. This link will open the "/chat/threads" page which contains all threads where the current user is a member. It's ordered by activity (unread and then last message created). Moreover, the threads list of a channel page is now showing every threads of a channel, and not just the ones where you are a member.
2023-12-11 14:38:07 +08:00
@import "chat-user-threads";
@import "chat-navbar";
@import "chat-user-threads-row";
@import "chat-thread-title";
Reference in New Issue Copy Permalink