UX: Better organization of category settings

This commit is contained in:
Kris 2019-04-10 23:00:31 -04:00
parent be59c1559d
commit abd34882d5
3 changed files with 239 additions and 210 deletions

View File

@ -1,209 +1,225 @@
{{#if showPositionInput}} <section>
<section class='field position-fields'> <h3>{{i18n 'category.settings_sections.general'}}</h3>
<label for="category-position">
{{i18n 'category.position'}}
</label>
{{text-field value=category.position id="category-position" class="position-input" type="number"}}
</section> {{#if showPositionInput}}
{{/if}} <section class='field position-fields'>
<label for="category-position">
{{i18n 'category.position'}}
</label>
{{text-field value=category.position id="category-position" class="position-input" type="number"}}
</section>
{{/if}}
{{#unless showPositionInput}} {{#unless showPositionInput}}
<section class='field'> <section class='field'>
{{i18n 'category.position_disabled'}} {{i18n 'category.position_disabled'}}
<a href="{{get-url '/admin/site_settings/category/basic'}}">{{i18n 'category.position_disabled_click'}}</a> <a href="{{get-url '/admin/site_settings/category/basic'}}">{{i18n 'category.position_disabled_click'}}</a>
</section> </section>
{{/unless}}
<section class='field'>
<div class="control-group">
<label for="topic-auto-close">
{{i18n 'topic.auto_close.label'}}
</label>
{{text-field value=category.auto_close_hours id="topic-auto-close" type="number"}}
<label>
{{input type="checkbox" checked=category.auto_close_based_on_last_post}}
{{i18n 'topic.auto_close.based_on_last_post'}}
</label>
</div>
</section>
<section class='field'>
<label>
{{input type="checkbox" checked=category.allow_badges}}
{{i18n 'category.allow_badges_label'}}
</label>
</section>
<section class="field">
<label>
{{input type="checkbox" checked=category.suppress_from_latest}}
{{i18n "category.suppress_from_latest"}}
</label>
</section>
<section class="field">
<label for="category-search-priority">
{{i18n "category.search_priority.label"}}
</label>
{{combo-box valueAttribute="value"
id="category-search-priority"
content=searchPrioritiesOptions
value=category.search_priority}}
</section>
{{#if isParentCategory}}
<section class="field show-subcategory-list-field">
<label>
{{input type="checkbox" checked=category.show_subcategory_list}}
{{i18n "category.show_subcategory_list"}}
</label>
</section>
{{/if}}
{{#if showSubcategoryListStyle}}
<section class="field subcategory-list-style-field">
<label for="subcategory-list-style">
{{i18n "category.subcategory_list_style"}}
</label>
{{combo-box valueAttribute="value" id="subcategory-list-style" content=availableSubcategoryListStyles value=category.subcategory_list_style}}
</section>
{{/if}}
<section class="field default-view-field">
<label for="category-default-view">
{{i18n "category.default_view"}}
</label>
<div class="controls">
{{combo-box valueAttribute="value" id="category-default-view" content=availableViews value=category.default_view}}
</div>
</section>
<section class="field default-top-period-field">
<label for="category-default-period">
{{i18n "category.default_top_period"}}
</label>
<div class="controls">
{{combo-box valueAttribute="value" id="category-default-period" content=availableTopPeriods value=category.default_top_period}}
</div>
</section>
<section class="field">
<label for="category-sort-order">
{{i18n "category.sort_order"}}
</label>
<div class="controls">
{{combo-box valueAttribute="value" content=availableSorts value=category.sort_order none="category.sort_options.default"}}
{{#unless isDefaultSortOrder}}
{{combo-box castBoolean=true valueAttribute="value" content=sortAscendingOptions value=category.sort_ascending none="category.sort_options.default"}}
{{/unless}} {{/unless}}
</div>
</section>
<section class="field"> <section class="field">
<label for="category-number-featured-topics"> <label for="category-number-featured-topics">
{{#if category.parent_category_id}} {{#if category.parent_category_id}}
{{i18n "category.subcategory_num_featured_topics"}} {{i18n "category.subcategory_num_featured_topics"}}
{{else}} {{else}}
{{i18n "category.num_featured_topics"}} {{i18n "category.num_featured_topics"}}
{{/if}} {{/if}}
</label>
{{text-field value=category.num_featured_topics id="category-number-featured-topics" type="number"}}
</section>
<section class="field">
<label for="category-number-daily-bump">
{{i18n "category.num_auto_bump_daily"}}
</label>
{{text-field value=category.custom_fields.num_auto_bump_daily id="category-number-daily-bump" type="number"}}
</section>
<section class="field">
<label>
{{input type="checkbox" checked=category.all_topics_wiki}}
{{i18n "category.all_topics_wiki"}}
</label>
</section>
<section class="field">
<label>
{{input type="checkbox" checked=category.navigate_to_first_post_after_read}}
{{i18n "category.navigate_to_first_post_after_read"}}
</label>
</section>
{{#if siteSettings.topic_featured_link_enabled}}
<section class='field'>
<div class="allowed-topic-featured-link-category">
<label class="checkbox-label">
{{input type="checkbox" checked=category.topic_featured_link_allowed}}
{{i18n 'category.topic_featured_link_allowed'}}
</label>
</div>
</section>
{{/if}}
{{#if emailInEnabled}}
<section class='field'>
<label>
{{input type="checkbox" checked=category.email_in_allow_strangers}}
{{i18n 'category.email_in_allow_strangers'}}
</label>
</section>
<section class='field'>
<label for="category-email-in">
{{d-icon "far-envelope"}}
{{i18n 'category.email_in'}}
</label>
{{text-field id="category-email-in" class="email-in" value=category.email_in}}
</section>
<section class='field'>
<label>
{{input type="checkbox" checked=category.mailinglist_mirror}}
{{i18n 'category.mailinglist_mirror'}}
</label>
</section>
{{plugin-outlet name="category-email-in" args=(hash category=category)}}
{{/if}}
{{#if siteSettings.tagging_enabled}}
<section class='field minimum-required-tags'>
<label for="category-minimum-tags">
{{i18n 'category.minimum_required_tags'}}
</label> </label>
{{text-field value=category.minimum_required_tags id="category-minimum-tags" type="number" min="0"}} {{text-field value=category.num_featured_topics id="category-number-featured-topics" type="number"}}
</section> </section>
{{/if}}
<section class="field"> <section class="field">
<label> <label for="category-search-priority">
{{input type="checkbox" checked=category.custom_fields.require_topic_approval}} {{i18n "category.search_priority.label"}}
{{i18n 'category.require_topic_approval'}} </label>
</label> <div class="controls">
</section> {{combo-box valueAttribute="value"
id="category-search-priority"
content=searchPrioritiesOptions
value=category.search_priority}}
</div>
</section>
<section class="field">
<label>
{{input type="checkbox" checked=category.custom_fields.require_reply_approval}}
{{i18n 'category.require_reply_approval'}}
</label>
</section>
{{plugin-outlet name="category-custom-settings" args=(hash category=category)}}
{{#unless emailInEnabled}}
<section class='field'> <section class='field'>
{{i18n 'category.email_in_disabled'}} <label>
<a href="{{get-url '/admin/site_settings/category/email'}}">{{i18n 'category.email_in_disabled_click'}}</a> {{input type="checkbox" checked=category.allow_badges}}
{{i18n 'category.allow_badges_label'}}
</label>
</section> </section>
{{/unless}}
{{#if siteSettings.topic_featured_link_enabled}}
<section class='field'>
<div class="allowed-topic-featured-link-category">
<label class="checkbox-label">
{{input type="checkbox" checked=category.topic_featured_link_allowed}}
{{i18n 'category.topic_featured_link_allowed'}}
</label>
</div>
</section>
{{/if}}
<section class="field">
<label>
{{input type="checkbox" checked=category.suppress_from_latest}}
{{i18n "category.suppress_from_latest"}}
</label>
</section>
<section class="field">
<label>
{{input type="checkbox" checked=category.navigate_to_first_post_after_read}}
{{i18n "category.navigate_to_first_post_after_read"}}
</label>
</section>
<section class="field">
<label>
{{input type="checkbox" checked=category.all_topics_wiki}}
{{i18n "category.all_topics_wiki"}}
</label>
</section>
</section>
<section>
<h3>{{i18n 'category.settings_sections.moderation'}}</h3>
<section class="field">
<label>
{{input type="checkbox" checked=category.custom_fields.require_topic_approval}}
{{i18n 'category.require_topic_approval'}}
</label>
</section>
<section class="field">
<label>
{{input type="checkbox" checked=category.custom_fields.require_reply_approval}}
{{i18n 'category.require_reply_approval'}}
</label>
</section>
<section class='field'>
<div class="control-group">
<label for="topic-auto-close">
{{i18n 'topic.auto_close.label'}}
</label>
{{text-field value=category.auto_close_hours id="topic-auto-close" type="number"}}
<label>
{{input type="checkbox" checked=category.auto_close_based_on_last_post}}
{{i18n 'topic.auto_close.based_on_last_post'}}
</label>
</div>
</section>
{{#if siteSettings.tagging_enabled}}
<section class='field minimum-required-tags'>
<label for="category-minimum-tags">
{{i18n 'category.minimum_required_tags'}}
</label>
{{text-field value=category.minimum_required_tags id="category-minimum-tags" type="number" min="0"}}
</section>
{{/if}}
<section class="field">
<label for="category-number-daily-bump">
{{i18n "category.num_auto_bump_daily"}}
</label>
{{text-field value=category.custom_fields.num_auto_bump_daily id="category-number-daily-bump" type="number"}}
</section>
</section>
<section>
<h3> {{i18n "category.settings_sections.appearance"}}</h3>
<section class="field default-view-field">
<label for="category-default-view">
{{i18n "category.default_view"}}
</label>
<div class="controls">
{{combo-box valueAttribute="value" id="category-default-view" content=availableViews value=category.default_view}}
</div>
</section>
<section class="field default-top-period-field">
<label for="category-default-period">
{{i18n "category.default_top_period"}}
</label>
<div class="controls">
{{combo-box valueAttribute="value" id="category-default-period" content=availableTopPeriods value=category.default_top_period}}
</div>
</section>
<section class="field">
<label for="category-sort-order">
{{i18n "category.sort_order"}}
</label>
<div class="controls">
{{combo-box valueAttribute="value" content=availableSorts value=category.sort_order none="category.sort_options.default"}}
{{#unless isDefaultSortOrder}}
{{combo-box castBoolean=true valueAttribute="value" content=sortAscendingOptions value=category.sort_ascending none="category.sort_options.default"}}
{{/unless}}
</div>
</section>
{{#if isParentCategory}}
<section class="field show-subcategory-list-field">
<label>
{{input type="checkbox" checked=category.show_subcategory_list}}
{{i18n "category.show_subcategory_list"}}
</label>
</section>
{{/if}}
{{#if showSubcategoryListStyle}}
<section class="field subcategory-list-style-field">
<label for="subcategory-list-style">
{{i18n "category.subcategory_list_style"}}
</label>
{{combo-box valueAttribute="value" id="subcategory-list-style" content=availableSubcategoryListStyles value=category.subcategory_list_style}}
</section>
{{/if}}
</section>
<section>
<h3> {{i18n "category.settings_sections.email"}}</h3>
{{#if emailInEnabled}}
<section class='field'>
<label for="category-email-in">
{{d-icon "far-envelope"}}
{{i18n 'category.email_in'}}
</label>
{{text-field id="category-email-in" class="email-in" value=category.email_in}}
</section>
<section class='field'>
<label>
{{input type="checkbox" checked=category.email_in_allow_strangers}}
{{i18n 'category.email_in_allow_strangers'}}
</label>
</section>
<section class='field'>
<label>
{{input type="checkbox" checked=category.mailinglist_mirror}}
{{i18n 'category.mailinglist_mirror'}}
</label>
</section>
{{plugin-outlet name="category-email-in" args=(hash category=category)}}
{{/if}}
{{#unless emailInEnabled}}
<section class='field'>
{{i18n 'category.email_in_disabled'}}
<a href="{{get-url '/admin/site_settings/category/email'}}">{{i18n 'category.email_in_disabled_click'}}</a>
</section>
{{/unless}}
</section>
{{plugin-outlet name="category-custom-settings" args=(hash category=category) connectorTagName="" tagName="section"}}

View File

@ -402,10 +402,6 @@
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.subcategory-list-style-field {
margin-left: 16px;
}
.disable_info_wrap { .disable_info_wrap {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -431,12 +427,6 @@
} }
} }
section.minimum-required-tags {
input[type="number"] {
width: 5em;
}
}
.permission-selector { .permission-selector {
margin-right: 0.25em; margin-right: 0.25em;
} }
@ -449,6 +439,24 @@
.add-permission-icon { .add-permission-icon {
margin: 0; margin: 0;
} }
.edit-category-tab-settings {
$category-settings-width: 280px; // Consistent width makes this all easier to read
> section {
margin-bottom: 1.5em;
}
input[type="number"],
input[type="text"],
.select-kit {
width: $category-settings-width;
}
label {
max-width: $category-settings-width;
}
.category-custom-settings-outlet {
border-top: 1px solid $primary-low;
}
}
} }
.incoming-email-modal { .incoming-email-modal {

View File

@ -2538,7 +2538,7 @@ en:
require_topic_approval: "Require moderator approval of all new topics" require_topic_approval: "Require moderator approval of all new topics"
require_reply_approval: "Require moderator approval of all new replies" require_reply_approval: "Require moderator approval of all new replies"
this_year: "this year" this_year: "this year"
position: "Position:" position: "Position on the categories page:"
default_position: "Default Position" default_position: "Default Position"
position_disabled: "Categories will be displayed in order of activity. To control the order of categories in lists, " position_disabled: "Categories will be displayed in order of activity. To control the order of categories in lists, "
position_disabled_click: 'enable the "fixed category positions" setting.' position_disabled_click: 'enable the "fixed category positions" setting.'
@ -2588,6 +2588,11 @@ en:
rows_with_featured_topics: "Rows with featured topics" rows_with_featured_topics: "Rows with featured topics"
boxes: "Boxes" boxes: "Boxes"
boxes_with_featured_topics: "Boxes with featured topics" boxes_with_featured_topics: "Boxes with featured topics"
settings_sections:
general: "General"
moderation: "Moderation"
appearance: "Appearance"
email: "Email"
flagging: flagging:
title: "Thanks for helping to keep our community civil!" title: "Thanks for helping to keep our community civil!"