github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-02 19:35:20 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
dac4f97032
discourse/plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss

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

125 lines
2.0 KiB
SCSS
Raw Normal View History

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
@mixin thread-list-item {
display: flex;
flex-direction: row;
padding: 0.5rem;
Remove border radius from chat (#22437) * add border-radius-large variable * UX: replace chat border-radius with variable
2023-07-10 21:07:38 +08:00
border-radius: var(--d-border-radius);
UX: hide settings btn when disabled Also sets lighter border on hover
2023-05-15 13:53:30 +08:00
background-color: var(--primary-very-low);
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
border: 1px solid transparent;
}
.chat-thread-list-item {
@include thread-list-item;
cursor: pointer;
FEATURE: Chat thread header indicator improvements (#21807) This changes the thread header positioning of the unread indicator to match the designs based on the route: 1. When the channel is open, show the indicator of # unread threads with the icon 2. When the threads list is open, show no indicator since you are on the list and can see which threads are unread 3. When a single thread is open, show the unread threads indicator along with a left < back button, with a label to show that this goes back to ongoing discussions Drawer changes to come in another PR.
2023-05-30 16:10:07 +08:00
margin: 0.25rem;
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
& + .chat-thread-list-item {
margin-top: 0;
}
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
.touch & {
&:active {
background-color: var(--d-hover);
UX: hide settings btn when disabled Also sets lighter border on hover
2023-05-15 13:53:30 +08:00
border: 1px solid var(--primary-300);
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
}
}
.no-touch & {
&:hover,
&:active {
background-color: var(--d-hover);
UX: hide settings btn when disabled Also sets lighter border on hover
2023-05-15 13:53:30 +08:00
border: 1px solid var(--primary-300);
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
}
}
UX: minor tweaks to thread list item (#23259) - drop @ - prevents +X (participants) to show on next line - few spacing/fonts adjustments Note that this commit is also stripping links from chat excerpts.
2023-08-25 17:20:03 +08:00
&__participants {
display: flex;
align-items: center;
}
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
&__main {
flex: 1 1 100%;
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
width: 100%;
}
&__body {
padding-bottom: 0.25rem;
word-break: break-word;
margin: 0.5rem 0rem;
> * {
pointer-events: none;
}
}
UI: refines thread list item (#23207) It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-25 00:45:20 +08:00
&__last-reply-author {
font-weight: 700;
}
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
&__metadata {
display: flex;
UI: refines thread list item (#23207) It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-25 00:45:20 +08:00
align-items: center;
justify-content: space-between;
}
&__metadata__separator {
UX: minor tweaks to thread list item (#23259) - drop @ - prevents +X (participants) to show on next line - few spacing/fonts adjustments Note that this commit is also stripping links from chat excerpts.
2023-08-25 17:20:03 +08:00
padding-inline: 0.5rem;
UI: refines thread list item (#23207) It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-25 00:45:20 +08:00
font-weight: 700;
UX: minor tweaks to thread list item (#23259) - drop @ - prevents +X (participants) to show on next line - few spacing/fonts adjustments Note that this commit is also stripping links from chat excerpts.
2023-08-25 17:20:03 +08:00
font-size: 20px;
text-align: center;
UI: refines thread list item (#23207) It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-25 00:45:20 +08:00
}
&__participants {
margin-right: 0.25rem;
}
&__replies-count {
margin-left: auto;
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
}
UI: refines thread list item (#23207) It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-25 00:45:20 +08:00
&__last-reply-timestamp,
&__replies-count {
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
color: var(--secondary-low);
font-size: var(--font-down-1);
UI: refines thread list item (#23207) It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-25 00:45:20 +08:00
@include ellipsis;
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
}
&__header {
display: flex;
flex-direction: row;
align-items: center;
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
margin-bottom: 0.25rem;
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
}
&__title {
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
flex: 1 1 auto;
UX: minor tweaks to thread list item (#23259) - drop @ - prevents +X (participants) to show on next line - few spacing/fonts adjustments Note that this commit is also stripping links from chat excerpts.
2023-08-25 17:20:03 +08:00
font-weight: 500;
font-size: var(--font-up-1);
UI: refines thread list item (#23207) It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-25 00:45:20 +08:00
@include ellipsis;
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
}
UX: minor tweaks to thread list item (#23259) - drop @ - prevents +X (participants) to show on next line - few spacing/fonts adjustments Note that this commit is also stripping links from chat excerpts.
2023-08-25 17:20:03 +08:00
&__last-reply-excerpt {
font-size: var(--font-0);
}
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
&__unread-indicator {
flex: 0 0 auto;
UX: minor tweaks to thread list item (#23259) - drop @ - prevents +X (participants) to show on next line - few spacing/fonts adjustments Note that this commit is also stripping links from chat excerpts.
2023-08-25 17:20:03 +08:00
.chat-thread-list-item-unread-indicator__number {
color: var(--primary);
font-size: var(--font-up-1);
}
UX: hide settings btn when disabled Also sets lighter border on hover
2023-05-15 13:53:30 +08:00
}
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
&__open-button {
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: center;
}
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
&__om-user-avatar {
UI: refines thread list item (#23207) It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-25 00:45:20 +08:00
margin-right: 0.25rem;
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
flex: 0 0 auto;
}
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
}
Reference in New Issue Copy Permalink