Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made form elements more consistent #21921

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Made form elements more consistent #21921

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5fd8126
Added a global style for form controls with AdminX style
minimaluminium Oct 10, 2024
58f1757
Updated tag page styles
sanne-san Oct 10, 2024
6ac01d9
Made post settings form controls consistent
minimaluminium Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ghost/admin/app/components/gh-psm-visibility-input.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
@update={{action "updateVisibility"}}
@data-test-select="post-visibility"
/>
{{svg-jar "arrow-down-small"}}
<span class="ember-power-select-status-icon"></span>
</span>
209 changes: 100 additions & 109 deletions ghost/admin/app/components/tags/tag-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,111 +1,102 @@
<div class="gh-main-section">
<div class="flex justify-between items-center">
<h4 class="gh-main-section-header small bn">Basic settings</h4>
<a href={{this.tagURL}} target="_blank" rel="noopener noreferrer" class="gh-view-tag-link">View tag {{svg-jar "external"}}</a>
</div>
<section class="gh-main-section-block">
<div class="gh-main-section-content grey columns-2">
<div>
<div class="gh-tag-settings-multiprop">
<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="name" class="mr2 flex-auto">
<label for="tag-name">Name</label>
<input
type="text"
class="gh-input"
id="tag-name"
name="name"
value={{@tag.name}}
{{on "input" (pick "target.value" (fn this.setTagProperty "name"))}}
{{on "blur" (fn this.validateTagProperty "name")}}
data-test-input="tag-name"
/>
<span class="error">
<GhErrorMessage @errors={{@tag.errors}} @property="name" />
<GhErrorMessage @errors={{@tag.errors}} @property="accentColor" data-test-error="accentColor" />
</span>
<p class="description">
Start with # to create internal tags
<a href="https://ghost.org/help/organising-content/#private-tags" target="_blank" rel="noopener noreferrer">Learn more</a>
</p>
</GhFormGroup>

<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
<label for="accent-color">Color</label>
<div class="input-color">
<input
type="text"
placeholder="15171A"
name="accent-color"
autocorrect="off"
maxlength="6"
value={{this.accentColor}}
class="gh-input"
{{on "input" (perform this.debounceUpdateAccentColorTask)}}
{{on "blur" this.updateAccentColor}}
aria-label="Accent color hex value"
data-test-input="accentColor"
/>
<div class="color-picker-horizontal-divider"></div>
<div
class="color-box-container"
style={{this.accentColorBgStyle}}
>
<input
type="color"
name="accent-color"
class="color-picker"
value={{this.accentColorPickerValue}}
{{on "input" (perform this.debounceUpdateAccentColorTask)}}
aria-label="Accent color picker"
>
</div>
</div>
</GhFormGroup>
</div>
<div class="gh-main-section columns-2">
<div>
<div class="gh-tag-settings-multiprop">
<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="name" class="mr2 flex-auto">
<label for="tag-name">Name</label>
<input
type="text"
class="gh-input-admin-x"
id="tag-name"
name="name"
value={{@tag.name}}
{{on "input" (pick "target.value" (fn this.setTagProperty "name"))}}
{{on "blur" (fn this.validateTagProperty "name")}}
data-test-input="tag-name"
/>
<span class="error">
<GhErrorMessage @errors={{@tag.errors}} @property="name" />
<GhErrorMessage @errors={{@tag.errors}} @property="accentColor" data-test-error="accentColor" />
</span>
<p class="description">
Start with # to create internal tags.
<a href="https://ghost.org/help/organising-content/#private-tags" target="_blank" rel="noopener noreferrer">Learn more</a>
</p>
</GhFormGroup>

<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="slug">
<label for="tag-slug">Slug</label>
<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
<label for="accent-color">Color</label>
<div class="input-color">
<input
type="text"
value={{@tag.slug}}
id="tag-slug"
name="slug"
class="gh-input"
{{on "input" (pick "target.value" (fn this.setTagProperty "slug"))}}
{{on "blur" (fn this.validateTagProperty "slug")}}
data-test-input="tag-slug"
placeholder="15171A"
name="accent-color"
autocorrect="off"
maxlength="6"
value={{this.accentColor}}
class="gh-input-admin-x"
{{on "input" (perform this.debounceUpdateAccentColorTask)}}
{{on "blur" this.updateAccentColor}}
aria-label="Accent color hex value"
data-test-input="accentColor"
/>
<GhUrlPreview @prefix="tag" @slug={{@tag.slug}} @tagName="p" @classNames="description" />
<GhErrorMessage @errors={{@tag.errors}} @property="slug" />
</GhFormGroup>

<GhFormGroup class="no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="description">
<label for="tag-description">Description</label>
<textarea
id="tag-description"
name="description"
class="gh-input gh-tag-details-textarea"
{{on "input" (pick "target.value" (fn this.setTagProperty "description"))}}
{{on "blur" (fn this.validateTagProperty "description")}}
data-test-input="tag-description"
>{{@tag.description}}</textarea>

<GhErrorMessage @errors={{@tag.errors}} @property="description" />
<p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters @tag.description 500}}</p>
</GhFormGroup>
</div>
<GhFormGroup class="gh-tag-image-uploader no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="featureImage">
<label for="tag-image">Tag image</label>
<GhImageUploaderWithPreview
@image={{@tag.featureImage}}
@text="Upload tag image"
@allowUnsplash={{true}}
@update={{fn this.setTagProperty "featureImage"}}
@remove={{fn this.setTagProperty "featureImage" ""}}
/>
<div
class="color-box-container"
style={{this.accentColorBgStyle}}
>
<input
type="color"
name="accent-color"
class="color-picker"
value={{this.accentColorPickerValue}}
{{on "input" (perform this.debounceUpdateAccentColorTask)}}
aria-label="Accent color picker"
>
</div>
</div>
</GhFormGroup>
</div>
</section>

<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="slug">
<label for="tag-slug">Slug</label>
<input
type="text"
value={{@tag.slug}}
id="tag-slug"
name="slug"
class="gh-input-admin-x"
{{on "input" (pick "target.value" (fn this.setTagProperty "slug"))}}
{{on "blur" (fn this.validateTagProperty "slug")}}
data-test-input="tag-slug"
/>
<GhUrlPreview @prefix="tag" @slug={{@tag.slug}} @tagName="p" @classNames="description" />
<GhErrorMessage @errors={{@tag.errors}} @property="slug" />
</GhFormGroup>

<GhFormGroup class="no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="description">
<label for="tag-description">Description</label>
<textarea
id="tag-description"
name="description"
class="gh-input-admin-x gh-tag-details-textarea"
{{on "input" (pick "target.value" (fn this.setTagProperty "description"))}}
{{on "blur" (fn this.validateTagProperty "description")}}
data-test-input="tag-description"
>{{@tag.description}}</textarea>

<GhErrorMessage @errors={{@tag.errors}} @property="description" />
<p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters @tag.description 500}}</p>
</GhFormGroup>
</div>
<GhFormGroup class="gh-tag-image-uploader no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="featureImage">
<label for="tag-image">Tag image</label>
<GhImageUploaderWithPreview
@image={{@tag.featureImage}}
@text="Upload tag image"
@allowUnsplash={{true}}
@update={{fn this.setTagProperty "featureImage"}}
@remove={{fn this.setTagProperty "featureImage" ""}}
/>
</GhFormGroup>
</div>

<section class="gh-expandable">
Expand All @@ -128,7 +119,7 @@
<input
id="meta-title"
name="metaTitle"
class="gh-input"
class="gh-input-admin-x"
placeholder={{@tag.name}}
value={{@tag.metaTitle}}
{{on "input" (pick "target.value" (fn this.setTagProperty "metaTitle"))}}
Expand All @@ -143,7 +134,7 @@
<textarea
id="meta-description"
name="metaDescription"
class="gh-input gh-tag-details-textarea"
class="gh-input-admin-x gh-tag-details-textarea"
placeholder={{@tag.description}}
{{on "input" (pick "target.value" (fn this.setTagProperty "metaDescription"))}}
{{on "blur" (fn this.validateTagProperty "metaDescription")}}
Expand All @@ -157,7 +148,7 @@
<input
id="canonical-url"
name="canonicalUrl"
class="gh-input"
class="gh-input-admin-x"
value={{@tag.canonicalUrl}}
{{on "input" (pick "target.value" (fn this.setTagProperty "canonicalUrl"))}}
{{on "blur" this.validateCanonicalUrl}}
Expand Down Expand Up @@ -217,7 +208,7 @@
type="text"
id="twitter-title"
name="twitterTitle"
class="gh-input"
class="gh-input-admin-x"
placeholder={{@tag.name}}
value={{@tag.twitterTitle}}
{{on "input" (pick "target.value" (fn this.setTagProperty "twitterTitle"))}}
Expand All @@ -232,7 +223,7 @@
<textarea
id="twitter-description"
name="twitterDescription"
class="gh-input gh-tag-details-textarea"
class="gh-input-admin-x gh-tag-details-textarea"
placeholder={{@tag.description}}
{{on "input" (pick "target.value" (fn this.setTagProperty "twitterDescription"))}}
{{on "blur" (fn this.validateTagProperty "twitterDescription")}}
Expand Down Expand Up @@ -314,7 +305,7 @@
type="text"
id="og-title"
name="ogTitle"
class="gh-input"
class="gh-input-admin-x"
placeholder={{@tag.name}}
value={{@tag.ogTitle}}
{{on "input" (pick "target.value" (fn this.setTagProperty "ogTitle"))}}
Expand All @@ -329,7 +320,7 @@
<textarea
id="og-description"
name="ogDescription"
class="gh-input gh-tag-details-textarea"
class="gh-input-admin-x gh-tag-details-textarea"
placeholder={{@tag.description}}
{{on "input" (pick "target.value" (fn this.setTagProperty "ogDescription"))}}
{{on "blur" (fn this.validateTagProperty "ogDescription")}}
Expand Down
15 changes: 15 additions & 0 deletions ghost/admin/app/controllers/tag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,33 @@
import Controller from '@ember/controller';
import DeleteTagModal from '../components/tags/delete-tag-modal';
import {action} from '@ember/object';
import {inject} from 'ghost-admin/decorators/inject';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';

export default class TagController extends Controller {
@service modals;
@service notifications;
@service router;
@inject config;

get tag() {
return this.model;
}

get tagURL() {
const blogUrl = this.config.blogUrl;
const tagSlug = this.tag?.slug || '';

let tagURL = this.tag?.canonicalUrl || `${blogUrl}/tag/${tagSlug}`;

if (!tagURL.endsWith('/')) {
tagURL += '/';
}

return tagURL;
}

@action
confirmDeleteTag() {
return this.modals.open(DeleteTagModal, {
Expand Down
Loading
Loading