github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 11:23:25 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Add loading spinner to install theme modal (#25888)

Browse Source 
This commit adds a loading spinner when installing a theme as sometimes
installing a theme can take quite a bit of time this way we have some
indication that things are still working as the theme is being
installed.
This commit is contained in:
Blake Erickson 2024-02-26 14:14:21 -07:00 committed by GitHub
parent 8805a34001
commit 52d357c1d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 134 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

256
app/assets/javascripts/admin/addon/components/modal/install-theme.hbs
View File

@ -31,138 +31,148 @@
</div>
{{/unless}}
<div class="install-theme-content">
{{#if this.popular}}
<div class="popular-theme-items">
{{#each this.themes as |theme|}}
<div class="popular-theme-item" data-name={{theme.name}}>
<div class="popular-theme-name">
<a
href={{theme.meta_url}}
rel="noopener noreferrer"
target="_blank"
>
{{#if theme.component}}
{{d-icon
"puzzle-piece"
title="admin.customize.theme.component"
}}
<ConditionalLoadingSection
@isLoading={{this.loading}}
@title={{i18n "admin.customize.theme.installing_message"}}
>
{{#if this.popular}}
<div class="popular-theme-items">
{{#each this.themes as |theme|}}
<div class="popular-theme-item" data-name={{theme.name}}>
<div class="popular-theme-name">
<a
href={{theme.meta_url}}
rel="noopener noreferrer"
target="_blank"
>
{{#if theme.component}}
{{d-icon
"puzzle-piece"
title="admin.customize.theme.component"
}}
{{/if}}
{{theme.name}}
</a>
<div class="popular-theme-description">
{{theme.description}}
</div>
</div>
<div class="popular-theme-buttons">
{{#if theme.installed}}
<span>{{i18n "admin.customize.theme.installed"}}</span>
{{else}}
<DButton
class="btn-small"
@label="admin.customize.theme.install"
@disabled={{this.installDisabled}}
@icon="upload"
@action={{fn this.installThemeFromList theme.value}}
/>
{{#if theme.preview}}
<a
href={{theme.preview}}
rel="noopener noreferrer"
target="_blank"
>
{{d-icon "desktop"}}
{{i18n "admin.customize.theme.preview"}}
</a>
{{/if}}
{{/if}}
{{theme.name}}
</a>
<div class="popular-theme-description">
{{theme.description}}
</div>
</div>
<div class="popular-theme-buttons">
{{#if theme.installed}}
<span>{{i18n "admin.customize.theme.installed"}}</span>
{{else}}
<DButton
class="btn-small"
@label="admin.customize.theme.install"
@disabled={{this.installDisabled}}
@icon="upload"
@action={{fn this.installThemeFromList theme.value}}
/>
{{#if theme.preview}}
<a
href={{theme.preview}}
rel="noopener noreferrer"
target="_blank"
>
{{d-icon "desktop"}}
{{i18n "admin.customize.theme.preview"}}
</a>
{{/if}}
{{/if}}
{{/each}}
</div>
{{/if}}
{{#if this.local}}
<div class="inputs">
<input
{{on "change" this.uploadLocaleFile}}
type="file"
id="file-input"
accept=".dcstyle.json,application/json,.tar.gz,application/x-gzip,.zip,application/zip"
/>
<br />
<span class="description">
{{i18n "admin.customize.theme.import_file_tip"}}
</span>
</div>
{{/if}}
{{#if this.remote}}
<div class="inputs">
<div class="repo">
<div class="label">
{{i18n "admin.customize.theme.import_web_tip"}}
</div>
<Input
@value={{this.uploadUrl}}
placeholder={{this.urlPlaceholder}}
/>
</div>
{{/each}}
</div>
{{/if}}
{{#if this.local}}
<div class="inputs">
<input
{{on "change" this.uploadLocaleFile}}
type="file"
id="file-input"
accept=".dcstyle.json,application/json,.tar.gz,application/x-gzip,.zip,application/zip"
/>
<br />
<span class="description">
{{i18n "admin.customize.theme.import_file_tip"}}
</span>
</div>
{{/if}}
{{#if this.remote}}
<div class="inputs">
<div class="repo">
<div class="label">
{{i18n "admin.customize.theme.import_web_tip"}}
</div>
<Input
@value={{this.uploadUrl}}
placeholder={{this.urlPlaceholder}}
<DButton
class="btn-small advanced-repo"
@action={{this.toggleAdvanced}}
@label="admin.customize.theme.import_web_advanced"
/>
{{#if this.advancedVisible}}
<div class="branch">
<div class="label">
{{i18n "admin.customize.theme.remote_branch"}}
</div>
<Input @value={{this.branch}} placeholder="main" />
</div>
{{/if}}
{{#if this.showPublicKey}}
<div class="public-key">
<div class="label">
{{i18n "admin.customize.theme.public_key"}}
</div>
<div class="public-key-text-wrapper">
<Textarea
class="public-key-value"
readonly={{true}}
@value={{this.publicKey}}
{{did-insert this.generatePublicKey}}
/>
<CopyButton @selector="textarea.public-key-value" />
</div>
</div>
{{/if}}
</div>
{{/if}}
{{#if this.create}}
<div class="inputs">
<div class="label">{{i18n
"admin.customize.theme.create_name"
}}</div>
<Input @value={{this.name}} placeholder={{this.placeholder}} />
<div class="label">{{i18n
"admin.customize.theme.create_type"
}}</div>
<ComboBox
@valueProperty="value"
@content={{this.createTypes}}
@value={{this.selectedType}}
@onChange={{this.updateSelectedType}}
/>
</div>
<DButton
class="btn-small advanced-repo"
@action={{this.toggleAdvanced}}
@label="admin.customize.theme.import_web_advanced"
/>
{{#if this.advancedVisible}}
<div class="branch">
<div class="label">
{{i18n "admin.customize.theme.remote_branch"}}
</div>
<Input @value={{this.branch}} placeholder="main" />
{{/if}}
{{#if this.directRepoInstall}}
<div class="repo">
<div class="label">
{{html-safe
(i18n
"admin.customize.theme.direct_install_tip"
name=this.uploadName
)
}}
</div>
{{/if}}
{{#if this.showPublicKey}}
<div class="public-key">
<div class="label">
{{i18n "admin.customize.theme.public_key"}}
</div>
<div class="public-key-text-wrapper">
<Textarea
class="public-key-value"
readonly={{true}}
@value={{this.publicKey}}
{{did-insert this.generatePublicKey}}
/>
<CopyButton @selector="textarea.public-key-value" />
</div>
</div>
{{/if}}
</div>
{{/if}}
{{#if this.create}}
<div class="inputs">
<div class="label">{{i18n "admin.customize.theme.create_name"}}</div>
<Input @value={{this.name}} placeholder={{this.placeholder}} />
<div class="label">{{i18n "admin.customize.theme.create_type"}}</div>
<ComboBox
@valueProperty="value"
@content={{this.createTypes}}
@value={{this.selectedType}}
@onChange={{this.updateSelectedType}}
/>
</div>
{{/if}}
{{#if this.directRepoInstall}}
<div class="repo">
<div class="label">
{{html-safe
(i18n
"admin.customize.theme.direct_install_tip" name=this.uploadName
)
}}
<pre><code>{{this.uploadUrl}}</code></pre>
</div>
<pre><code>{{this.uploadUrl}}</code></pre>
</div>
{{/if}}
{{/if}}
</ConditionalLoadingSection>
</div>
</:body>
<:footer>

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

@ -5450,6 +5450,7 @@ en:
install_upload: "From your device"
install_git_repo: "From a git repository"
install_create: "Create new"
installing_message: "Installing theme, this may take several minutes..."
duplicate_remote_theme: "The theme component “%{name}” is already installed, are you sure you want to install another copy?"
force_install: "The theme cannot be installed because the Git repository is inaccessible. Are you sure you want to continue installing it?"
create_placeholder: "Create Placeholder"