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 8 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
8 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
97e3ad4
Refreshed tag and member pages
sanne-san Jan 7, 2025
268df9f
Updated acceptance test for member subscription details
sanne-san Jan 8, 2025
71baf29
Merge branch 'main' into ember-form-to-admin-x
sanne-san Jan 8, 2025
937c70d
Refined member and tag page further
sanne-san Jan 8, 2025
24c7080
Updated dark mode styles on tag and member pages
sanne-san Jan 9, 2025
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
1 change: 1 addition & 0 deletions ghost/admin/app/components/gh-member-label-input.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
tokenComponent=(component "gh-token-input/label-token")
}}
@class="gh-member-label-input"
@triggerClass={{@triggerClass}}
@onChange={{this.updateLabels}}
@onCreate={{this.createLabel}}
@options={{this.availableLabels}}
Expand Down
273 changes: 139 additions & 134 deletions ghost/admin/app/components/gh-member-settings-form.hbs
View file
Open in desktop

Large diffs are not rendered by default.

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>
6 changes: 2 additions & 4 deletions ghost/admin/app/components/member/activity-feed.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
<h4 class="gh-main-section-header small bn">Activity</h4>
{{#if @member.isNew}}
<div class="gh-main-section-content grey">
<div class="gh-main-section-content bordered">
<div class="gh-member-feed gh-member-feed-no-data">
<Member::ActivityFeedEmpty />
</div>
</div>
{{else}}
{{#let (members-event-fetcher filter=(members-event-filter [email protected] excludedEvents=this.excludedEventTypes) pageSize=5 [email protected]) as |eventsFetcher|}}
<div class="gh-main-section-content grey {{if eventsFetcher.data "" "mt8"}}">
<div class="gh-member-feed {{if eventsFetcher.data "" "gh-member-feed-no-data"}}" ...attributes>
<div class="gh-main-section-content bordered {{if eventsFetcher.data "" "mt8"}}" ...attributes>
<div class="flex-auto flex flex-column items-stretch {{if eventsFetcher.data "justify-between" "h-100 justify-center"}}">
<div>
{{#if eventsFetcher.isLoading}}
Expand Down Expand Up @@ -66,7 +65,6 @@
{{/if}}
</div>
</div>
</div>
</div>
{{/let}}
{{/if}}
44 changes: 21 additions & 23 deletions ghost/admin/app/components/member/newsletter-preference.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,26 @@
<h4 class="gh-main-section-header small bn">Newsletters</h4>
<div class="gh-main-section-content grey {{unless this.suppressionData.suppressed 'gh-member-newsletter-section'}}">
<div class="gh-main-section-content bordered {{unless this.suppressionData.suppressed 'gh-member-newsletter-section'}}">
{{#unless this.suppressionData.suppressed}}
<div class="gh-member-newsletters">
{{#each this.newsletters as |newsletter|}}
<div class="gh-member-newsletter-row" data-test-member-settings-switch>
<div>
<h4 class="gh-member-newsletter-title">{{newsletter.name}}</h4>
</div>
<div class="for-switch xs {{if this.suppressionData.suppressed 'disabled'}}">
<label class="switch" for={{newsletter.forId}}>
<Input
@checked={{newsletter.subscribed}}
@type="checkbox"
id={{newsletter.forId}}
name="subscribed"
data-test-checkbox="member-subscribed"
{{on "click" (fn this.updateNewsletterPreference newsletter)}}
/>
<span class="input-toggle-component"></span>
</label>
</div>
{{#each this.newsletters as |newsletter|}}
<div class="gh-member-newsletter-row" data-test-member-settings-switch>
<div>
<h4 class="gh-member-newsletter-title">{{newsletter.name}}</h4>
</div>
{{/each}}
</div>
<div class="for-switch xs {{if this.suppressionData.suppressed 'disabled'}}">
<label class="switch" for={{newsletter.forId}}>
<Input
@checked={{newsletter.subscribed}}
@type="checkbox"
id={{newsletter.forId}}
name="subscribed"
data-test-checkbox="member-subscribed"
{{on "click" (fn this.updateNewsletterPreference newsletter)}}
/>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
{{/each}}
{{/unless}}

{{#if this.suppressionData.suppressed}}
Expand Down Expand Up @@ -50,7 +48,7 @@
</p>
</div>
{{else}}
<div class="gh-member-newsletter-footer midgrey">
<div class="gh-member-newsletter-footer middarkgrey">
If disabled, member will <em>not</em> receive newsletter emails
</div>
{{/if}}
Expand Down
2 changes: 1 addition & 1 deletion ghost/admin/app/components/member/subscription-detail-box.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<button type="button" class="flex pointer flex-row items-center gh-cp-membertier-details {{if this.showDetails "
rotate"}}" {{on "click" this.toggleSubscriptionExpanded}} aria-label="Show details">
Subscription details {{svg-jar "arrow-right-stroke"}}
Details {{svg-jar "arrow-right-stroke"}}
</button>
<div class="gh-membertier-advanced {{unless this.showDetails " hide"}}" data-test-subscription={{@index}}>
<div class="gh-membertier-details-container">
Expand Down
195 changes: 94 additions & 101 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,104 @@
<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>
<div class="gh-main-section-content bordered 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-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="accentColor" class="gh-tag-settings-colorcontainer">
<label for="accent-color">Color</label>
<div class="input-color">
<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"
placeholder="15171A"
name="accent-color"
autocorrect="off"
maxlength="6"
value={{this.accentColor}}
class="gh-input-x"
{{on "input" (perform this.debounceUpdateAccentColorTask)}}
{{on "blur" this.updateAccentColor}}
aria-label="Accent color hex value"
data-test-input="accentColor"
/>
<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">
<div
class="color-box-container"
style={{this.accentColorBgStyle}}
>
<input
type="text"
placeholder="15171A"
type="color"
name="accent-color"
autocorrect="off"
maxlength="6"
value={{this.accentColor}}
class="gh-input"
class="color-picker"
value={{this.accentColorPickerValue}}
{{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}}
aria-label="Accent color picker"
>
<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>

<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"
{{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 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>
</div>
</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 @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-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-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>
</section>
<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>
</div>

<section class="gh-expandable">
Expand All @@ -128,7 +121,7 @@
<input
id="meta-title"
name="metaTitle"
class="gh-input"
class="gh-input-x"
placeholder={{@tag.name}}
value={{@tag.metaTitle}}
{{on "input" (pick "target.value" (fn this.setTagProperty "metaTitle"))}}
Expand All @@ -143,7 +136,7 @@
<textarea
id="meta-description"
name="metaDescription"
class="gh-input gh-tag-details-textarea"
class="gh-input-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 +150,7 @@
<input
id="canonical-url"
name="canonicalUrl"
class="gh-input"
class="gh-input-x"
value={{@tag.canonicalUrl}}
{{on "input" (pick "target.value" (fn this.setTagProperty "canonicalUrl"))}}
{{on "blur" this.validateCanonicalUrl}}
Expand Down Expand Up @@ -217,7 +210,7 @@
type="text"
id="twitter-title"
name="twitterTitle"
class="gh-input"
class="gh-input-x"
placeholder={{@tag.name}}
value={{@tag.twitterTitle}}
{{on "input" (pick "target.value" (fn this.setTagProperty "twitterTitle"))}}
Expand All @@ -232,7 +225,7 @@
<textarea
id="twitter-description"
name="twitterDescription"
class="gh-input gh-tag-details-textarea"
class="gh-input-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 +307,7 @@
type="text"
id="og-title"
name="ogTitle"
class="gh-input"
class="gh-input-x"
placeholder={{@tag.name}}
value={{@tag.ogTitle}}
{{on "input" (pick "target.value" (fn this.setTagProperty "ogTitle"))}}
Expand All @@ -329,7 +322,7 @@
<textarea
id="og-description"
name="ogDescription"
class="gh-input gh-tag-details-textarea"
class="gh-input-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
Loading
Loading