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

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

26 lines
716 B
SCSS
Raw Normal View History

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-mobile";
FIX: various mobile optimizations (#22043) * FIX: increases resize observer throttle delay 25ms is not necessary and was sometimes causing jankyness. * FIX: removes ios momentum fix delay Instead of a 50ms, simply use next+schedule("afterRender") to attempt to have the shortest delay possible. * FIX: backdrop event propagation Prevents backdrop touch to propagate to underlying channel/thread. * UX: adds is-active class to container of active message This change allows to keep the background on the active message while the actions menu is displayed. * FIX: prevents skip-link to be selected on press * UX: allows to close actions menu instantly The backdrop should always receive events, we don't need to wait for the menu to be fully displayed. * UI: adds spacing between last message and composer * UI: makes backdrop less dark * FIX: makes events passive on long-press modifier
2023-06-09 23:37:26 +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-composer";
UX: Chat composer dropdown styling mobile (#25244)
2024-01-15 16:59:24 +08:00
@import "chat-composer-dropdown";
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-index";
@import "chat-message-actions";
@import "chat-message";
@import "chat-selection-manager";
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756) This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel. There are now several new classes and concepts: * ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit), and interacts with the pane of the current context to modify the UI * ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the messages, and are mostly used for state management for things like message selection. * ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the message actions, and the composer, dealing with reply and edit message state. * Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane * Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues. The thread panel now also works in the chat drawer, and the thread messages have less actions than the main panel, since some do not make sense there (e.g. moving messages to a different channel). The thread panel title, excerpt, and message sender have also been removed for now to save space. This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will make the thread MessageBus subscriptions work and disable echo mode for the initial release of threads. Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 21:19:52 +08:00
@import "chat-emoji-picker";
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-composer-upload";
UI: thread panel sizing/spacing on mobile (#21440) The side panel on mobile is full screen. As a result we need to tweak spacing and sizing to make it correctly full screen like the channel.
2023-05-09 06:17:42 +08:00
@import "chat-side-panel";
@import "chat-thread";
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-threads-list";
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-message-thread-indicator";
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";
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: introduces group channels (#24288) Group channels will allow users to create channels with a name and invite people. It's possible to add people even after creation of the channel. Removing users is not yet possible but will be added in the near future. Technically a group channel is `direct_message_channel` with a group attribute set to true on its direct message (chatable). This model might evolve in the future but offers much flexibility for now without having to rely on a complex migration. The commit essentially consists of: - a migration to set existing direct message channels with more than 2 users to a group - a new message creator which allows to search, add members, and create groups - a new `AddUsersToChannel` service - a modified `SearchChatable` service
2023-11-10 18:29:28 +08:00
@import "chat-form";
FEATURE: encourage users to set chat thread titles (#26617) This change encourages users to title their threads to make it easier for other users to join in on conversations that matter to them. The creator of the chat thread will receive a toast notification prompting them to add a thread title when on mobile and the thread has at least 5 sent replies.
2024-04-29 17:20:01 +08:00
@import "chat-modal-thread-settings";
UX: chat navbar > alignments part 2 (#24985) * UX: chat navbar > alignments part 2 * Change copy to be consistent My threads * Dont show back button on full page desktop
2023-12-20 23:24:10 +08:00
@import "chat-navbar";
UX: small alignment tweaks for chat thread list header (#24410)
2023-11-17 00:30:48 +08:00
@import "chat-thread-list-header";
UX: user threads styling tweaks
2023-12-13 21:10:52 +08:00
@import "chat-user-threads";
FEATURE: chat header redesign on mobile (#24938) This change simplifies the layout of our header when chat is open on mobile. The search icon and hamburger menu icons are also hidden and the Discourse logo is replaced by a ← Forum link to make it easier to continue where you left off within the forum (prior to this update the user could only go back to the forum index page).
2023-12-26 17:36:26 +08:00
@import "chat-header";
FEATURE: Mobile Chat Footer Redesign (#25161) This update adds three tabs to the bottom of the chat overlay to make it easier for users to navigate chat on mobile. As a result of this change: - Direct Messages are now shown separately from public channels on mobile - My Threads has now moved from the channel list to it's own tab on mobile - My Threads can still be accessed on desktop via the sidebar and within the drawer channel list - Chat back button has been updated to navigate to the correct tab (for both channels and threads) Some special cases: - If DMs are not used then the tab is not rendered - If the user has no threads then the tab is not rendered - If both the tabs for DMs and Threads aren't available then the whole footer will not be rendered - Chat footer is only shown on the listing pages (DMs, Channels, My Threads) --------- Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com> Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-01-16 14:29:33 +08:00
@import "chat-footer";
Reference in New Issue Copy Permalink