Skip to content

Commit

Permalink
UX: Minor layout fixes and improved consistency on theme admin
Browse files Browse the repository at this point in the history
  • Loading branch information
@awesomerobot
awesomerobot committed Aug 25, 2020
1 parent cef51b3 commit a92a6b7
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 109 deletions.
203 changes: 104 additions & 99 deletions app/assets/javascripts/admin/templates/customize-themes-show.hbs
View file
Expand Up @@ -2,13 +2,14 @@
<div class="title">
{{#if editingName}}
{{text-field value=model.name autofocus="true"}}
{{d-button action=(action "finishedEditingName") class="btn-primary submit-edit" icon="check"}}
{{d-button action=(action "cancelEditingName") class="cancel-edit" icon="times"}}
{{d-button action=(action "finishedEditingName") class="btn-primary btn-small submit-edit" icon="check"}}
{{d-button action=(action "cancelEditingName") class="btn-small cancel-edit" icon="times"}}
{{else}}
<span>{{model.name}}</span>
{{d-button
action=(action "startEditingName")
icon="pencil-alt"
class="btn-small"
}}
{{/if}}
</div>
Expand Down Expand Up @@ -52,93 +53,92 @@
</div>
{{/unless}}

{{#unless model.component}}
<div class="control-unit">
{{inline-edit-checkbox action=(action "applyDefault") labelKey="admin.customize.theme.is_default" checked=model.default}}
{{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.user_selectable" checked=model.user_selectable}}
</div>
{{/unless}}

{{#if model.remote_theme}}

{{#if model.remote_theme.remote_url}}
{{#if sourceIsHttp}}
<a class="remote-url" href={{remoteThemeLink}}>{{i18n "admin.customize.theme.source_url"}}{{d-icon "link"}}</a>
{{else}}
<div class="remote-url"><code>{{model.remote_theme.remote_url}}</code></div>
{{/if}}
{{/if}}
{{#if model.remote_theme.about_url}}
<a class="url about-url" href={{model.remote_theme.about_url}}>{{i18n "admin.customize.theme.about_theme"}}{{d-icon "link"}}</a>
{{/if}}
{{#if model.remote_theme.license_url}}
<a class="url license-url" href={{model.remote_theme.license_url}}>{{i18n "admin.customize.theme.license"}}{{d-icon "link"}}</a>
{{/if}}

{{#if model.description}}
<span class="theme-description">{{model.description}}</span>
{{/if}}
<div class="metadata control-unit">
{{#if model.remote_theme}}
{{#if model.remote_theme.remote_url}}
{{#if sourceIsHttp}}
<a class="remote-url" href={{remoteThemeLink}}>{{i18n "admin.customize.theme.source_url"}}{{d-icon "link"}}</a>
{{else}}
<div class="remote-url"><code>{{model.remote_theme.remote_url}}</code></div>
{{/if}}
{{/if}}
{{#if model.remote_theme.about_url}}
<a class="url about-url" href={{model.remote_theme.about_url}}>{{i18n "admin.customize.theme.about_theme"}}{{d-icon "link"}}</a>
{{/if}}
{{#if model.remote_theme.license_url}}
<a class="url license-url" href={{model.remote_theme.license_url}}>{{i18n "admin.customize.theme.license"}}{{d-icon "link"}}</a>
{{/if}}

<span class="metadata">
{{#if model.remote_theme.authors}}<span class="authors"><span class="heading">{{i18n "admin.customize.theme.authors"}}</span> {{model.remote_theme.authors}}</span>{{/if}}
{{#if model.remote_theme.theme_version}}<span class="version"><span class="heading">{{i18n "admin.customize.theme.version"}}</span> {{model.remote_theme.theme_version}}</span>{{/if}}
</span>
{{#if model.description}}
<span class="theme-description">{{model.description}}</span>
{{/if}}

<div class="control-unit">
{{#if model.remote_theme.is_git}}
{{#if model.remote_theme.authors}}<span class="authors"><span class="heading">{{i18n "admin.customize.theme.authors"}}</span> {{model.remote_theme.authors}}</span>{{/if}}
{{#if model.remote_theme.theme_version}}<span class="version"><span class="heading">{{i18n "admin.customize.theme.version"}}</span> {{model.remote_theme.theme_version}}</span>{{/if}}

{{#if showRemoteError}}
<div class="error-message">
{{d-icon "exclamation-triangle"}} {{i18n "admin.customize.theme.repo_unreachable"}}
</div>
<div class="raw-error">
<code>{{model.remoteError}}</code>
</div>
{{/if}}
<div class="control-unit">
{{#if model.remote_theme.is_git}}

{{#if model.remote_theme.commits_behind}}
{{#d-button action=(action "updateToLatest") icon="download" class="btn-primary"}}{{i18n "admin.customize.theme.update_to_latest"}}{{/d-button}}
{{else}}
{{#d-button action=(action "checkForThemeUpdates") icon="sync" class="btn-default"}}{{i18n "admin.customize.theme.check_for_updates"}}{{/d-button}}
{{/if}}
{{#if showRemoteError}}
<div class="error-message">
{{d-icon "exclamation-triangle"}} {{i18n "admin.customize.theme.repo_unreachable"}}
</div>
<div class="raw-error">
<code>{{model.remoteError}}</code>
</div>
{{/if}}

<span class="status-message">
{{#if updatingRemote}}
{{i18n "admin.customize.theme.updating"}}
{{#if model.remote_theme.commits_behind}}
{{d-button action=(action "updateToLatest") icon="download" class="btn-primary" label="admin.customize.theme.update_to_latest"}}
{{else}}
{{#if model.remote_theme.commits_behind}}
{{i18n "admin.customize.theme.commits_behind" count=model.remote_theme.commits_behind}}
{{#if model.remote_theme.github_diff_link}}
<a href={{model.remote_theme.github_diff_link}}>
{{i18n "admin.customize.theme.compare_commits"}}
</a>
{{/if}}
{{d-button action=(action "checkForThemeUpdates") icon="sync" class="btn-default" label="admin.customize.theme.check_for_updates"}}
{{/if}}

<span class="status-message">
{{#if updatingRemote}}
{{i18n "admin.customize.theme.updating"}}
{{else}}
{{#unless showRemoteError}}
{{i18n "admin.customize.theme.up_to_date"}} {{format-date model.remote_theme.updated_at leaveAgo="true"}}
{{/unless}}
{{#if model.remote_theme.commits_behind}}
{{i18n "admin.customize.theme.commits_behind" count=model.remote_theme.commits_behind}}
{{#if model.remote_theme.github_diff_link}}
<a href={{model.remote_theme.github_diff_link}}>
{{i18n "admin.customize.theme.compare_commits"}}
</a>
{{/if}}
{{else}}
{{#unless showRemoteError}}
{{i18n "admin.customize.theme.up_to_date"}} {{format-date model.remote_theme.updated_at leaveAgo="true"}}
{{/unless}}
{{/if}}
{{/if}}
{{/if}}
</span>
{{else}}
<span class="status-message">
{{d-icon "info-circle"}} {{i18n "admin.customize.theme.imported_from_archive"}}
</span>
{{else}}
<span class="status-message">
{{d-icon "info-circle"}} {{i18n "admin.customize.theme.imported_from_archive"}}
</span>
{{/if}}
</div>
{{else}}
<span class="heading">{{i18n "admin.customize.theme.creator"}}</span>
<span>
{{#user-link user=model.user}}
{{format-username model.user.username}}
{{/user-link}}
</span>
{{/if}}
</div>
{{else}}
{{/if}}
</div>


{{#unless model.component}}
<div class="control-unit">
<span class="heading">{{i18n "admin.customize.theme.creator"}}</span>
<span>
{{#user-link user=model.user}}
{{format-username model.user.username}}
{{/user-link}}
</span>
{{inline-edit-checkbox action=(action "applyDefault") labelKey="admin.customize.theme.is_default" checked=model.default}}
{{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.user_selectable" checked=model.user_selectable}}
</div>
{{/if}}
{{/unless}}


{{#unless model.component}}
{{#d-section class="form-horizontal theme settings"}}
{{#d-section class="form-horizontal theme settings control-unit"}}
<div class="row setting">
<div class="setting-label">
{{i18n "admin.customize.theme.color_scheme"}}
Expand Down Expand Up @@ -175,13 +175,13 @@
{{/if}}

{{#if model.component}}
{{#d-section class="form-horizontal theme settings"}}
{{#d-section class="form-horizontal theme settings control-unit"}}
<div class="row setting">
{{theme-setting-relatives-selector setting=relativesSelectorSettingsForComponent model=model class="theme-setting"}}
</div>
{{/d-section}}
{{else}}
{{#d-section class="form-horizontal theme settings"}}
{{#d-section class="form-horizontal theme settings control-unit"}}
<div class="row setting">
{{theme-setting-relatives-selector setting=relativesSelectorSettingsForTheme model=model class="theme-setting"}}
</div>
Expand Down Expand Up @@ -225,7 +225,7 @@
{{else}}
<div class="description">{{i18n "admin.customize.theme.no_uploads"}}</div>
{{/if}}
{{#d-button action=(action "addUploadModal") class="btn-default" icon="plus"}}{{i18n "admin.customize.theme.add"}}{{/d-button}}
{{d-button action=(action "addUploadModal") class="btn-default" icon="plus" label="admin.customize.theme.add"}}
</div>

{{#if extraFiles.length}}
Expand All @@ -251,7 +251,7 @@
{{#if hasSettings}}
<div class="control-unit">
<div class="mini-title">{{i18n "admin.customize.theme.theme_settings"}}</div>
{{#d-section class="form-horizontal theme settings"}}
{{#d-section class="form-horizontal theme settings control-unit"}}
{{#each settings as |setting|}}
{{theme-setting-editor setting=setting model=model class="theme-setting"}}
{{/each}}
Expand All @@ -262,34 +262,39 @@
{{#if hasTranslations}}
<div class="control-unit">
<div class="mini-title">{{i18n "admin.customize.theme.theme_translations"}}</div>
{{#d-section class="form-horizontal theme settings translations"}}
{{#d-section class="form-horizontal theme settings translations control-unit"}}
{{#each translations as |translation|}}
{{theme-translation translation=translation model=model class="theme-translation"}}
{{/each}}
{{/d-section}}
</div>
{{/if}}

<a href={{previewUrl}} title={{i18n "admin.customize.explain_preview"}} rel="noopener noreferrer" target="_blank" class="btn btn-default">{{d-icon "desktop"}}{{i18n "admin.customize.theme.preview"}}</a>
<a class="btn btn-default export" rel="noopener noreferrer" target="_blank" href={{downloadUrl}}>{{d-icon "download"}} {{i18n "admin.export_json.button_text"}}</a>
<div class="theme-controls">

<a href={{previewUrl}} title={{i18n "admin.customize.explain_preview"}} rel="noopener noreferrer" target="_blank" class="btn btn-default">{{d-icon "desktop"}}{{i18n "admin.customize.theme.preview"}}</a>
<a class="btn btn-default export" rel="noopener noreferrer" target="_blank" href={{downloadUrl}}>{{d-icon "download"}} {{i18n "admin.export_json.button_text"}}</a>

{{d-button action=(action "switchType") label="admin.customize.theme.convert" icon=convertIcon class="btn-default btn-normal" title=convertTooltip}}
{{d-button action=(action "switchType") label="admin.customize.theme.convert" icon=convertIcon class="btn-default btn-normal" title=convertTooltip}}

{{#if model.component}}
{{#if model.enabled}}
{{d-button
class="btn-default"
action=(action "disableComponent")
icon="ban"
label="admin.customize.theme.disable"}}
{{else}}
{{d-button
class="btn-default"
action=(action "enableComponent")
icon="check"
label="admin.customize.theme.enable"}}
{{#if model.component}}
{{#if model.enabled}}
{{d-button
class="btn-default"
action=(action "disableComponent")
icon="ban"
label="admin.customize.theme.disable"}}
{{else}}
{{d-button
class="btn-default"
action=(action "enableComponent")
icon="check"
label="admin.customize.theme.enable"}}
{{/if}}
{{/if}}
{{/if}}

{{d-button action=(action "destroy") label="admin.customize.delete" icon="trash-alt" class="btn-danger"}}
{{d-button action=(action "destroy") label="admin.customize.delete" icon="trash-alt" class="btn-danger"}}

</div>

</div>
32 changes: 22 additions & 10 deletions app/assets/stylesheets/common/admin/customize.scss
View file
Expand Up @@ -108,19 +108,21 @@
display: inline-block;
vertical-align: top;

.btn {
line-height: $line-height-medium; // Temporary button-height fix
}

.title {
font-size: $font-up-4;
font-weight: bold;
margin-bottom: 10px;
a {
font-size: $font-down-2;
margin-bottom: 0.25em;
display: flex;
align-items: stretch;

input {
margin: 0;
}
.btn {
line-height: $line-height-small;
margin-left: 0.5em;
}
a {
font-size: $font-down-2;
}
}

Expand Down Expand Up @@ -161,15 +163,22 @@
margin-bottom: 7px;
}
.control-unit {
margin-bottom: 25px;
margin-top: 15px;
margin-top: 0.5em;
margin-bottom: 2em;
}
.control {
margin-bottom: 10px;
}
.description {
margin-bottom: 12px;
}
.theme-controls {
display: flex;
flex-wrap: wrap;
.btn {
margin: 0 0.5em 0.5em 0;
}
}
}
.add-component-button {
vertical-align: middle;
Expand Down Expand Up @@ -330,6 +339,9 @@
margin-bottom: 0.5rem;
}
}
.setting {
padding-bottom: 0;
}
}

.current-style.maximized {
Expand Down

0 comments on commit a92a6b7

Please sign in to comment.