Discource-C
/
discourse-ai
mirror of https://github.com/discourse/discourse-ai.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: minor image caption style adjustments (#482)

This commit is contained in:
Kris 2024-02-20 17:59:59 -05:00 committed by GitHub
parent bfd4fafaec
commit d88dceb49d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/javascripts/discourse/connectors/editor-preview/ai-image-caption-container.gjs
View File

@ -39,13 +39,6 @@ export default class AiImageCaptionContainer extends Component {
<template> <template>
{{#if this.imageCaptionPopup.showPopup}} {{#if this.imageCaptionPopup.showPopup}}
<div class="composer-popup education-message ai-caption-popup"> <div class="composer-popup education-message ai-caption-popup">
<DButton
@class="btn-transparent close"
@title="close"
@action={{fn (mut this.imageCaptionPopup.showPopup) false}}
@icon="times"
/>
<ConditionalLoadingSpinner <ConditionalLoadingSpinner
@condition={{this.imageCaptionPopup.loading}} @condition={{this.imageCaptionPopup.loading}}
> >
@ -71,7 +64,7 @@ export default class AiImageCaptionContainer extends Component {
<span class="credits"> <span class="credits">
{{icon "discourse-sparkles"}} {{icon "discourse-sparkles"}}
{{i18n "discourse_ai.ai_helper.image_caption.credits"}} <span>{{i18n "discourse_ai.ai_helper.image_caption.credits"}}</span>
</span> </span>
</div> </div>
</div> </div>

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

@ -461,23 +461,27 @@
// AI Image Caption Feature: // AI Image Caption Feature:
.image-wrapper .button-wrapper { .image-wrapper .button-wrapper {
.generate-caption { .generate-caption {
background: var(--tertiary-100); background: var(--tertiary-low);
color: var(--tertiary-900); color: var(--tertiary);
font-weight: 600; box-shadow: var(--shadow-dropdown);
position: absolute; position: absolute;
top: -3.5rem; top: -3.15rem;
left: 1rem; left: 0.75rem;
padding: 0.5em; padding: 0.5em 0.75em;
transition: background 0.25s ease; transition: all 0.25s ease;
.d-icon { .d-icon {
margin-right: 0.25rem; margin-right: 0.25rem;
} }
&:active {
box-shadow: none;
}
&:hover, &:hover,
&:focus { &:focus {
background: var(--tertiary-hover); background: var(--tertiary-400);
color: white; color: var(--tertiary-hover);
cursor: pointer; cursor: pointer;
} }
@ -487,22 +491,31 @@
opacity: 0.8; opacity: 0.8;
&:hover, &:hover,
&:focus { &:focus {
background: var(--tertiary-100); background: var(--primary-low);
color: var(--tertiary-900); color: var(--primary-high);
} }
} }
} }
} }
.ai-caption-popup { .ai-caption-popup {
width: 400px; width: auto;
right: unset; right: unset;
bottom: 1.5rem; padding: 1em;
top: unset; top: unset;
bottom: 0;
textarea { textarea {
width: 95%; width: 100%;
height: 100px; max-width: 40vw;
min-height: 3em;
height: 7em;
min-width: 20em;
@include breakpoint(tablet) {
width: 100%;
max-width: unset;
min-width: unset;
}
} }
.actions { .actions {
@ -514,6 +527,14 @@
font-size: var(--font-down-1); font-size: var(--font-down-1);
margin-left: auto; margin-left: auto;
color: var(--tertiary); color: var(--tertiary);
.desktop-view & {
// a little extra space for extra narrow desktop view
@media screen and (max-width: 675px) {
span {
display: none;
}
}
}
} }
} }