mirror of
https://github.com/discourse/discourse.git
synced 2026-08-06 13:08:40 +08:00
9eef8a8b14Improves some chat integration provider setup UX. First, we added a quick link to the provider site settings. Second, we've added a way to quickly turn on each provider from a quick menu. Providers which need additional settings before being enabled (like Telegram and Slack) will show a form in a modal first.
195 lines
3.3 KiB
SCSS
Vendored
195 lines
3.3 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
#admin-plugin-chat-integration {
|
|
&.admin-detail {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.admin-nav-submenu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-top: var(--space-4);
|
|
border-bottom: 1px solid var(--content-border-color);
|
|
|
|
.chat-integration-add-provider-trigger {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.nav-pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.admin-config-area__header {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.chat-integration-channel-list {
|
|
margin-top: var(--space-6);
|
|
}
|
|
|
|
.chat-integration-error-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
|
|
.d-icon {
|
|
font-size: var(--font-up-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-config-area-card.channel-details {
|
|
margin-bottom: 1rem;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
.admin-config-area-card__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
background: var(--primary-very-low);
|
|
border-bottom: 1px solid var(--primary-low);
|
|
|
|
.channel-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-weight: 600;
|
|
|
|
.channel-error-btn {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.field-name {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-config-area-card__content {
|
|
padding: 0;
|
|
overflow-x: auto;
|
|
|
|
.channel-rules-table {
|
|
margin: 0;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
|
|
thead {
|
|
background: var(--primary-very-low);
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
td:last-child {
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-config-area-card__footer {
|
|
@include viewport.from(md) {
|
|
padding-top: var(--space-3);
|
|
}
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.chat-integration-setup-provider-modal {
|
|
&__instructions {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.chat-integration-modal {
|
|
.provider-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-kit__container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.select-kit {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
#chat_integration_error_modal {
|
|
pre {
|
|
max-width: 100%;
|
|
max-height: 400px;
|
|
overflow: auto;
|
|
background: var(--primary-very-low);
|
|
padding: 1rem;
|
|
border-radius: var(--d-border-radius);
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
.discourse-chat-integration-providers-empty-list {
|
|
margin-top: var(--space-6);
|
|
|
|
.admin-config-area-empty-list__title {
|
|
font-size: var(--font-up-1);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.chat-integration-providers-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
.inline-channel-form {
|
|
background: var(--primary-very-low);
|
|
border: 1px solid var(--primary-low);
|
|
border-radius: var(--d-border-radius);
|
|
padding: 1rem;
|
|
|
|
.form-kit__container {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-kit__container {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-kit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
&__fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
width: 50%;
|
|
|
|
.form-kit__field {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
