Discource-C/discourse-ai
1
0
Fork 0
mirror of https://github.com/discourse/discourse-ai.git synced 2025-02-16 08:24:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

UX: AI post helper DMenu styling (#770)

Browse Source
This commit is contained in:
chapoi 2024-09-11 05:45:48 +02:00 committed by GitHub
parent 36ce88f356
commit 22d1e71dc9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 81 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/javascripts/discourse/components/ai-helper-options-list.gjs
View File

@ -20,7 +20,7 @@ const AiHelperOptionsList = <template>
@action={{fn @performAction option}}
data-name={{option.name}}
data-value={{option.id}}
class="btn-flat ai-helper-options__button"
class="ai-helper-options__button"
/>
</li>
{{/if}}

6
assets/javascripts/discourse/components/ai-post-helper-menu.gjs
View File

@ -13,7 +13,6 @@ import { ajax } from "discourse/lib/ajax";
import { popupAjaxError } from "discourse/lib/ajax-error";
import { sanitize } from "discourse/lib/text";
import { clipboardCopy } from "discourse/lib/utilities";
import i18n from "discourse-common/helpers/i18n";
import { bind } from "discourse-common/utils/decorators";
import I18n from "discourse-i18n";
import eq from "truth-helpers/helpers/eq";
@ -285,10 +284,7 @@ export default class AiPostHelperMenu extends Component {
(and this.site.mobileView (eq this.menuState this.MENU_STATES.options))
}}
<div class="ai-post-helper-menu__selected-text">
<h2>
{{i18n "discourse_ai.ai_helper.post_options_menu.selected_text"}}
</h2>
<p>{{@data.selectedText}}</p>
{{@data.selectedText}}
</div>
{{/if}}

70
assets/stylesheets/modules/ai-helper/common/ai-helper.scss
View File

@ -78,7 +78,7 @@
.ai-custom-prompt {
display: flex;
gap: 0.25rem;
margin-bottom: 0.5rem;
padding: 0.75em 1rem;
&__input[type="text"] {
border-color: var(--primary-400);
@ -308,10 +308,19 @@
.ai-post-helper {
&__suggestion {
padding: 0.5rem;
display: flex;
flex-direction: column;
h2 {
font-size: var(--font-0);
border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.5em;
}
p {
margin: 0;
}
&__copy {
.d-icon-check {
color: var(--success);
@ -325,18 +334,17 @@
&__buttons {
display: flex;
align-items: center;
justify-content: stretch;
margin-top: 0.5rem;
gap: 0.5rem;
.btn {
width: 100%;
flex-grow: 1;
padding-inline: 0;
}
}
}
&__fast-edit {
.fast-edit-container {
padding-top: 0.5em;
padding: 0.75em 1rem;
}
}
}
@ -556,43 +564,10 @@
color: var(--primary-high);
}
.ai-post-helper-menu__selected-text {
padding: 0.75rem 1rem;
margin: 0.5rem;
border: 1px solid var(--primary-low-mid);
border-radius: var(--d-border-radius);
h2 {
font-size: var(--font-0);
}
p {
@include ellipsis;
font-size: var(--font-down-2);
margin: 0;
}
}
// Mobile Bottom Modal
.ai-post-helper-menu-content {
.ai-helper-loading {
justify-content: center;
}
.ai-helper-options__button {
padding: 1rem;
}
}
// AI Helper Options List
.ai-helper-options {
margin: 0;
list-style: none;
padding: 0.5rem;
li:not(:last-child) {
border-bottom: 1px solid var(--primary-low);
}
&__button {
justify-content: left;
@ -601,19 +576,24 @@
width: 100%;
border-radius: 0;
margin: 0;
padding-block: 0.6rem;
.d-button-label {
color: var(--primary-very-high);
}
padding: 0.5em 1rem;
&:focus,
&:hover {
color: var(--primary);
background: var(--d-hover);
.discourse-no-touch & {
color: var(--primary);
background: var(--d-hover);
}
.d-icon {
color: var(--primary-medium);
color: var(--primary-high);
.discourse-no-touch & {
color: var(--primary-high);
}
}
}
}

9
assets/stylesheets/modules/ai-helper/desktop/ai-helper-fk-modals.scss Normal file
View File

@ -0,0 +1,9 @@
.fk-d-menu {
.ai-post-helper {
&__suggestion__text,
&__suggestion__buttons {
padding: 0.75em 1rem;
margin: 0;
}
}
}

43
assets/stylesheets/modules/ai-helper/mobile/ai-helper-fk-modals.scss Normal file
View File

@ -0,0 +1,43 @@
.fk-d-menu-modal {
&.ai-post-helper-menu-content {
.ai-post-helper {
&__suggestion__text,
&__suggestion__buttons {
padding: 0.75em 1rem;
margin: 0;
}
}
.d-modal__body {
display: flex;
flex-direction: column;
max-height: 100%;
overflow: hidden;
}
.ai-post-helper-menu {
&__selected-text {
margin: 0.75em 1rem;
padding: 0.5em;
border-radius: var(--d-border-radius);
border: 1px solid var(--primary-low);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
overflow: auto;
overscroll-behavior: contain;
}
}
.ai-helper-options {
padding: 0;
}
.ai-custom-prompt {
padding: 0.75em 1rem;
margin: 0;
}
.ai-helper-loading {
justify-content: center;
}
}
}

1
config/locales/client.en.yml
View File

@ -318,7 +318,6 @@ en:
cancel: "Cancel"
insert_footnote: "Add footnote"
footnote_credits: "Explanation by AI"
selected_text: "Selected Text"
fast_edit:
suggest_button: "Suggest Edit"
thumbnail_suggestions:

2
plugin.rb
View File

@ -16,7 +16,9 @@ enabled_site_setting :discourse_ai_enabled
register_asset "stylesheets/common/streaming.scss"
register_asset "stylesheets/modules/ai-helper/common/ai-helper.scss"
register_asset "stylesheets/modules/ai-helper/desktop/ai-helper-fk-modals.scss", :desktop
register_asset "stylesheets/modules/ai-helper/mobile/ai-helper.scss", :mobile
register_asset "stylesheets/modules/ai-helper/mobile/ai-helper-fk-modals.scss", :mobile
register_asset "stylesheets/modules/summarization/mobile/ai-summary.scss", :mobile
register_asset "stylesheets/modules/summarization/common/ai-summary.scss"