github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 16:42:46 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Remove border radius from chat (#22437)

Browse Source 
* add border-radius-large variable

* UX: replace chat border-radius with variable
This commit is contained in:
chapoi 2023-07-10 15:07:38 +02:00 committed by GitHub
parent 8270d76f16
commit 0ce0bcd8ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 220 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/common/foundation/base.scss
View File

@ -7,6 +7,7 @@
--topic-body-width-padding: #{$topic-body-width-padding};
--topic-avatar-width: #{$topic-avatar-width};
--d-border-radius: initial;
--d-border-radius-large: initial;
--d-nav-pill-border-radius: var(--d-border-radius);
--d-button-border-radius: var(--d-border-radius);
--d-input-border-radius: var(--d-border-radius);

2
plugins/chat/assets/stylesheets/common/chat-channel-card.scss
View File

@ -4,7 +4,7 @@
position: relative;
padding: 1.25rem;
background-color: var(--primary-very-low);
border-radius: 5px;
border-radius: var(--d-border-radius-large);
min-height: 0;
min-width: 0;
border-left: 5px solid transparent;

2
plugins/chat/assets/stylesheets/common/chat-channel-preview-card.scss
View File

@ -33,7 +33,7 @@
&__join-channel-btn {
font-size: var(--font-up-2);
border: 1px solid transparent;
border-radius: 0.25rem;
border-radius: var(--d-button-border-radius);
line-height: normal;
box-sizing: border-box;
padding: 0.5em 0.65em;

6
plugins/chat/assets/stylesheets/common/chat-composer-upload.scss
View File

@ -5,7 +5,7 @@
border: 1px solid var(--primary-low-mid);
margin-right: 0.5em;
position: relative;
border-radius: 5px;
border-radius: var(--d-border-radius);
box-sizing: border-box;
&--image:not(.chat-composer-upload--in-progress) {
@ -56,7 +56,7 @@
.preview-img {
object-position: center;
object-fit: cover;
border-radius: 5px;
border-radius: var(--d-border-radius);
}
}
@ -95,7 +95,7 @@
.extension-pill {
background: var(--primary-low);
border-radius: 5px;
border-radius: var(--d-border-radius);
font-size: var(--font-down-2-rem);
padding: 0.1em 0.4em;
}

2
plugins/chat/assets/stylesheets/common/chat-composer.scss
View File

@ -44,7 +44,7 @@
width: 100%;
flex-direction: row;
border: 1px solid var(--primary-low);
border-radius: 10px;
border-radius: var(--d-border-radius-large);
background-color: var(--secondary);
min-height: 50px;
overflow: hidden;

4
plugins/chat/assets/stylesheets/common/chat-drawer.scss
View File

@ -143,7 +143,7 @@ a.chat-drawer-header__title {
&:hover {
.chat-drawer-header__top-line {
background: var(--primary-low);
border-radius: 5px;
border-radius: var(--d-border-radius);
}
}
}
@ -151,7 +151,7 @@ a.chat-drawer-header__title {
.chat-drawer-header {
box-sizing: border-box;
border-bottom: solid 1px var(--primary-low);
border-radius: 8px 8px 0 0;
border-radius: var(--d-border-radius-large) var(--d-border-radius-large) 0 0;
background: var(--primary-very-low);
width: 100%;
display: flex;

4
plugins/chat/assets/stylesheets/common/chat-emoji-picker.scss
View File

@ -17,7 +17,7 @@
&:hover,
&:focus {
background: var(--primary-very-low);
border-radius: 5px;
border-radius: var(--d-border-radius);
transform: scale(1.25);
}
}
@ -139,7 +139,7 @@
background: none;
margin-right: 0.5rem;
border: 0;
border-radius: 5px;
border-radius: var(--d-border-radius);
.d-icon {
visibility: hidden;

3
plugins/chat/assets/stylesheets/common/chat-message-actions.scss
View File

@ -15,7 +15,6 @@
}
.chat-message-actions {
border-radius: 0.25em;
background-color: var(--secondary);
display: flex;
box-shadow: 0 0.75px 0px rgba(0, 0, 0, 0.15);
@ -81,7 +80,6 @@
border-right: 1px solid var(--primary-300);
border-top: 1px solid var(--primary-300);
border-bottom: 1px solid var(--primary-300);
border-radius: 0 0.25em 0.25em 0;
}
}
@ -90,7 +88,6 @@
background: none;
border: 1px solid var(--primary-300);
border-left-color: transparent;
border-radius: 0 0.25em 0.25em 0;
padding: 0.5em 0;
width: 2.5em;
transition: background 0.2s, border-color 0.2s;

2
plugins/chat/assets/stylesheets/common/chat-message-info.scss
View File

@ -25,7 +25,7 @@
text-transform: uppercase;
padding: 0.25em;
background: var(--primary-low);
border-radius: 3px;
border-radius: var(--d-border-radius);
font-size: var(--font-down-2);
& + .chat-message-info__date {

6
plugins/chat/assets/stylesheets/common/chat-message-separator.scss
View File

@ -66,7 +66,7 @@
&.is-force-pinned {
.chat-message-separator__text {
border: 1px solid var(--primary-200);
border-radius: 4px;
border-radius: var(--d-border-radius);
color: var(--primary-800);
background: var(--primary-50);
@ -104,7 +104,7 @@
.no-touch & {
&:hover {
border: 1px solid var(--secondary-high);
border-radius: 4px;
border-radius: var(--d-border-radius);
color: var(--primary-800);
background: var(--primary-50);
}
@ -113,7 +113,7 @@
.touch & {
&:active {
border: 1px solid var(--secondary-high);
border-radius: 4px;
border-radius: var(--d-border-radius);
color: var(--primary-800);
background: var(--primary-50);
}

2
plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss
View File

@ -11,7 +11,7 @@
background-color: var(--primary-very-low);
margin: 4px 0 -2px calc(var(--message-left-width) - 0.25rem);
padding: 0.5rem;
border-radius: 8px;
border-radius: var(--d-border-radius-large);
color: var(--primary);
> * {

2
plugins/chat/assets/stylesheets/common/chat-message.scss
View File

@ -131,7 +131,7 @@
.touch .chat-message-container {
&.-active {
background: var(--d-hover);
border-radius: 5px;
border-radius: var(--d-border-radius);
&.-bookmarked {
background: var(--highlight-low);

2
plugins/chat/assets/stylesheets/common/chat-skeleton.scss
View File

@ -1,4 +1,4 @@
$radius: 3px;
$radius: var(--d-border-radius);
.chat-skeleton {
height: auto;

2
plugins/chat/assets/stylesheets/common/chat-thread-header-buttons.scss
View File

@ -13,7 +13,7 @@
&:hover {
color: var(--primary-medium);
background: var(--primary-very-low);
border-radius: 5px;
border-radius: var(--d-border-radius);
&:hover {
.d-icon {

2
plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss
View File

@ -2,7 +2,7 @@
display: flex;
flex-direction: row;
padding: 0.5rem;
border-radius: 4px;
border-radius: var(--d-border-radius);
background-color: var(--primary-very-low);
border: 1px solid transparent;
}

197
plugins/chat/assets/stylesheets/common/direct-message-creator.scss Normal file
View File

@ -0,0 +1,197 @@
.direct-message-creator {
display: flex;
flex-direction: column;
.title-area {
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--primary-low);
.title {
font-weight: 700;
font-size: var(--font-up-1);
line-height: var(--font-up-1);
}
}
.filter-area {
padding: 1rem;
display: flex;
align-items: flex-start;
border-bottom: 1px solid var(--primary-low);
cursor: text;
position: relative;
&.is-focused {
background: var(--primary-very-low);
}
}
.prefix {
line-height: 34px;
padding-right: 0.25rem;
}
.selected-user {
list-style: none;
padding: 0;
margin: 1px 0.25rem 0.25rem 1px;
padding: 0.25rem 0.5rem 0.25rem 0.25rem;
background: var(--primary-very-low);
border-radius: var(--d-border-radius-large);
border: 1px solid var(--primary-300);
align-items: center;
display: flex;
&:last-child {
margin-right: 0;
}
&.is-highlighted {
border-color: var(--tertiary);
.d-icon {
color: var(--danger);
}
}
.username {
margin: 0 0.5em;
}
& * {
pointer-events: none;
}
&:hover,
&:focus {
background: var(--primary-very-low);
color: var(--primary);
&:not(.is-highlighted) {
border-color: var(--tertiary);
}
.d-icon {
color: var(--danger);
}
}
}
.recipients {
display: flex;
flex-wrap: wrap;
margin-bottom: -0.25rem;
flex: 1;
min-width: 0;
align-items: center;
& + .btn {
margin-left: 1em;
}
.filter-usernames {
flex: 1 0 auto;
min-width: 80px;
margin: 1px 0 0 0;
appearance: none;
border: 0;
outline: 0;
background: none;
width: unset;
}
}
.results-container {
display: flex;
position: relative;
}
.results {
display: flex;
margin: 0;
flex-wrap: wrap;
border-bottom: 1px solid var(--primary-low);
box-shadow: var(--shadow-card);
position: absolute;
width: 100%;
z-index: z("dropdown");
background: var(--secondary);
.user {
display: flex;
width: 100%;
list-style: none;
cursor: pointer;
outline: 0;
padding: 0.25em 0.5em;
margin: 0.25rem;
align-items: center;
border-radius: var(--d-border-radius);
.user-info {
margin: 0;
width: 100%;
}
&.is-focused {
background: var(--tertiary-very-low);
}
* {
pointer-events: none;
}
.username {
margin-left: 0.25em;
color: var(--primary-high);
font-size: var(--font-up-1);
}
& + .user {
margin-top: 0.25em;
}
.user-status-message {
margin-left: 0.3em;
.emoji {
width: 15px;
height: 15px;
}
}
}
.btn {
padding: 0.25em;
&:last-child {
margin: 0;
}
}
}
.no-results-container {
position: relative;
}
.no-results {
text-align: center;
padding: 1rem;
width: 100%;
box-shadow: var(--shadow-card);
background: var(--secondary);
margin: 0;
box-sizing: border-box;
}
.fetching-preview-message {
padding: 1rem;
text-align: center;
}
.join-existing-channel {
margin: 1rem auto;
}
}

2
plugins/chat/assets/stylesheets/common/incoming-chat-webhooks.scss
View File

@ -6,7 +6,7 @@
justify-content: space-between;
background-color: var(--primary-very-low);
padding: 1em;
border-radius: 6px;
border-radius: var(--d-border-radius-large);
margin-bottom: 1em;
&--details {

6
plugins/chat/assets/stylesheets/desktop/base-desktop.scss
View File

@ -38,7 +38,7 @@
&:hover {
cursor: pointer;
border-radius: 5px;
border-radius: var(--d-border-radius);
box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.1),
0 2px 10px 0 rgba(var(--always-black-rgb), 0.1);
}
@ -88,10 +88,6 @@
.full-page-chat {
border-right: 1px solid var(--primary-low);
border-left: 1px solid var(--primary-low);
.chat-channel {
border-radius: unset;
}
}
@media screen and (max-width: var(--max-chat-width)) {

2
plugins/chat/assets/stylesheets/desktop/chat-channel-title.scss
View File

@ -3,7 +3,7 @@
&:hover {
background: var(--primary-very-low);
border-radius: 5px;
border-radius: var(--d-border-radius);
}
.chat-channel-title {

1
plugins/chat/assets/stylesheets/desktop/chat-index-full-page.scss
View File

@ -21,7 +21,6 @@
height: 2.5em;
padding: 0 0.5rem;
margin: 0 0.5rem 0.125rem 0.5rem;
border-radius: 0.25em;
&:hover,
&.active {
background-color: var(--primary-low);

3
plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss
View File

@ -5,7 +5,6 @@
right: 0;
display: flex;
flex-direction: column;
border-radius: 8px 8px 0 0;
margin: 0 5px;
transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1),
visibility cubic-bezier(0.4, 0, 0.2, 1);
@ -22,7 +21,6 @@
padding: 0.5em;
border: 1px solid var(--primary-low);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
border-radius: 8px;
.selected-message-reply {
margin-left: 5px;
@ -100,7 +98,6 @@
}
.reply-btn {
border-radius: 3px;
.d-icon {
font-size: var(--font-up-4);
}