UX: admin badge page improvements
This commit is contained in:
Joe
Joffrey JAFFEUX
parent
49b21727ee
commit
d720215183
|
|
@ -0,0 +1,23 @@
|
|||
import { emojiUrlFor } from "discourse/lib/text";
|
||||
|
||||
const badgeIntroLinks = [
|
||||
{
|
||||
text: "admin.badges.badge_intro.what_are_badges_title",
|
||||
href: "https://meta.discourse.org/t/32540",
|
||||
icon: "book"
|
||||
},
|
||||
{
|
||||
text: "admin.badges.badge_intro.badge_query_examples_title",
|
||||
href: "https://meta.discourse.org/t/18978",
|
||||
icon: "book"
|
||||
}
|
||||
];
|
||||
|
||||
export default Ember.Route.extend({
|
||||
setupController(controller) {
|
||||
controller.setProperties({
|
||||
badgeIntroLinks,
|
||||
badgeIntroEmoji: emojiUrlFor("woman_student:t4")
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,9 +1,16 @@
|
|||
{{#d-section class="current-badge content-body"}}
|
||||
<p>{{i18n 'admin.badges.none_selected'}}</p>
|
||||
|
||||
<div>
|
||||
{{#link-to 'adminBadges.show' 'new' class="btn btn-default"}}
|
||||
{{d-icon "plus"}} {{i18n 'admin.badges.new'}}
|
||||
{{/link-to}}
|
||||
{{#d-section class="current-badges"}}
|
||||
<div class="badge-intro">
|
||||
<img src={{badgeIntroEmoji}} class="badge-intro-emoji">
|
||||
<div class="content-wrapper">
|
||||
<h1>{{i18n 'admin.badges.badge_intro.title'}}</h1>
|
||||
<div class="external-resources">
|
||||
{{#each badgeIntroLinks as |link|}}
|
||||
<a href={{link.href}} class="external-link" target="_blank">
|
||||
{{d-icon link.icon}}
|
||||
<span>{{I18n link.text}}</span>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/d-section}}
|
||||
{{/d-section}}
|
||||
|
|
@ -1,25 +1,26 @@
|
|||
<div class="badges">
|
||||
|
||||
<div class="badges-header">
|
||||
<h3 class="badges-heading">{{i18n 'admin.badges.title'}}</h3>
|
||||
<div class="create-new-badge">
|
||||
{{#link-to 'adminBadges.show' 'new' class="btn btn-primary"}}
|
||||
{{d-icon "plus"}}
|
||||
<span>{{i18n 'admin.badges.new'}}</span>
|
||||
{{/link-to}}
|
||||
</div>
|
||||
</div>
|
||||
<div class='content-list'>
|
||||
<h3>{{i18n 'admin.badges.title'}}</h3>
|
||||
<ul>
|
||||
<ul class="admin-badge-list">
|
||||
{{#each model as |badge|}}
|
||||
<li>
|
||||
{{#link-to 'adminBadges.show' badge.id}}
|
||||
{{badge-button badge=badge}}
|
||||
{{#if badge.newBadge}}
|
||||
<span class="list-badge">{{i18n 'filters.new.lower_title'}}</span>
|
||||
{{/if}}
|
||||
{{/link-to}}
|
||||
</li>
|
||||
<li class="admin-badge-list-item">
|
||||
{{#link-to 'adminBadges.show' badge.id}}
|
||||
{{badge-button badge=badge}}
|
||||
{{#if badge.newBadge}}
|
||||
<span class="list-badge">{{i18n 'filters.new.lower_title'}}</span>
|
||||
{{/if}}
|
||||
{{/link-to}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{#link-to 'adminBadges.show' 'new' class="btn btn-default"}}
|
||||
{{d-icon "plus"}} {{i18n 'admin.badges.new'}}
|
||||
{{/link-to}}
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
{{outlet}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,30 +1,30 @@
|
|||
{{#d-modal-body title="admin.badges.badge_groupings.modal_title"}}
|
||||
<div>
|
||||
<ul class='badge-groupings'>
|
||||
{{#each workingCopy as |wc|}}
|
||||
<li class="badge-grouping-item">
|
||||
<div class="badge-grouping">
|
||||
{{#if wc.editing}}
|
||||
{{input value=wc.name class="badge-grouping-name-input"}}
|
||||
<button {{action "save" wc}} class="btn no-text">{{d-icon 'check'}}</button>
|
||||
{{else}}
|
||||
{{wc.displayName}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class='actions'>
|
||||
<button {{action "edit" wc}} class="btn no-text" disabled={{wc.system}}>{{d-icon "pencil-alt"}}</button>
|
||||
<button {{action "up" wc}} class="btn no-text">{{d-icon 'toggle-up'}}</button>
|
||||
<button {{action "down" wc}} class="btn no-text">{{d-icon 'toggle-down'}}</button>
|
||||
<button {{action "delete" wc}} class="btn no-text btn-danger" disabled={{wc.system}}>{{d-icon 'times'}}</button>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#d-modal-body title="admin.badges.badge_groupings.modal_title" class="badge-groupings-modal"}}
|
||||
<div class="badge-groupings">
|
||||
<ul class='badge-groupings-list'>
|
||||
{{#each workingCopy as |wc|}}
|
||||
<li class="badge-grouping-item">
|
||||
<div class="badge-grouping">
|
||||
{{#if wc.editing}}
|
||||
{{input value=wc.name class="badge-grouping-name-input"}}
|
||||
<button {{action "save" wc}} class="btn no-text">{{d-icon 'check'}}</button>
|
||||
{{else}}
|
||||
<span>{{wc.displayName}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class='actions'>
|
||||
<button {{action "edit" wc}} class="btn no-text" disabled={{wc.system}}>{{d-icon 'pencil-alt'}}</button>
|
||||
<button {{action "up" wc}} class="btn no-text">{{d-icon 'chevron-up'}}</button>
|
||||
<button {{action "down" wc}} class="btn no-text">{{d-icon 'chevron-down'}}</button>
|
||||
<button {{action "delete" wc}} class="btn no-text btn-danger"
|
||||
disabled={{wc.system}}>{{d-icon 'times'}}</button>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<button class='btn' {{action "add"}}>{{i18n 'admin.badges.new'}}</button>
|
||||
<button class='btn new-badge-grouping' {{action "add"}}>{{i18n 'admin.badges.new'}}</button>
|
||||
{{/d-modal-body}}
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class='btn btn-primary' {{action "saveAll"}} disabled={{submitDisabled}}>{{i18n 'admin.badges.save'}}</button>
|
||||
{{d-modal-cancel close=(route-action "closeModal")}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,31 +1,95 @@
|
|||
// Styles for admin/badges
|
||||
|
||||
// Badges area
|
||||
.badges {
|
||||
.content-list ul {
|
||||
margin-bottom: 10px;
|
||||
.list-badge {
|
||||
float: right;
|
||||
font-size: $font-down-1;
|
||||
font-weight: normal;
|
||||
padding: 0 6px;
|
||||
color: $secondary;
|
||||
background-color: $tertiary-medium;
|
||||
border-radius: 3px;
|
||||
.admin-badges {
|
||||
// flex page layout
|
||||
.badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.badges-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 0 100%;
|
||||
.create-new-badge {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.badge-intro {
|
||||
display: inline-flex;
|
||||
flex: 0 1 50%;
|
||||
}
|
||||
.content-list {
|
||||
flex: 0 0 27%;
|
||||
}
|
||||
.current-badges {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 1 1 72%;
|
||||
}
|
||||
}
|
||||
.badges-header {
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid $primary-low;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
.badges-heading {
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
.content-list {
|
||||
.admin-badge-list {
|
||||
height: 70vh;
|
||||
overflow-y: scroll;
|
||||
border-right: 1px solid $primary-low;
|
||||
border-left: 1px solid $primary-low;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
.admin-badge-list-item {
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
&:last-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
.list-badge {
|
||||
float: right;
|
||||
font-size: $font-down-1;
|
||||
font-weight: normal;
|
||||
padding: 0 6px;
|
||||
color: $secondary;
|
||||
background-color: $tertiary-medium;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.user-badge {
|
||||
border: none;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
.badge-intro {
|
||||
margin-top: 10%;
|
||||
.badge-intro-emoji {
|
||||
// it's an emoji so we want fixed deminsions
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
flex: 0 0 auto; // IE flex fix
|
||||
}
|
||||
.external-link {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.current-badge {
|
||||
margin: 20px;
|
||||
p.help {
|
||||
margin: 0;
|
||||
color: dark-light-choose($primary-medium, $secondary-medium);
|
||||
margin-top: 5px;
|
||||
color: $primary-medium;
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
|
||||
.badge-grouping-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.badge-selector {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -35,19 +99,12 @@
|
|||
.ace-wrapper {
|
||||
position: relative;
|
||||
height: 270px;
|
||||
margin-bottom: 10px;
|
||||
.ace_editor {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border: 1px solid #e9e9e9;
|
||||
border-radius: 3px;
|
||||
.ace_gutter {
|
||||
border-right: 1px solid #e9e9e9;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
}
|
||||
&[data-disabled="true"] {
|
||||
cursor: not-allowed;
|
||||
|
|
@ -60,10 +117,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.delete-link {
|
||||
margin-left: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
textarea {
|
||||
height: 200px;
|
||||
}
|
||||
|
|
@ -71,7 +124,7 @@
|
|||
.current-badge-actions {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border-top: 1px solid dark-light-choose($primary-low, $secondary-high);
|
||||
border-top: 1px solid $primary-low;
|
||||
}
|
||||
.buttons {
|
||||
float: left;
|
||||
|
|
@ -85,33 +138,40 @@
|
|||
}
|
||||
}
|
||||
|
||||
// badge-grouping modal
|
||||
.badge-groupings-modal {
|
||||
.badge-groupings {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.badge-groupings-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
.badge-grouping-item {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.badge-grouping {
|
||||
.badge-grouping-name-input {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// badge preview modal
|
||||
.badge-query-preview {
|
||||
.grant-count,
|
||||
.sample,
|
||||
.error-header {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.badge-errors {
|
||||
font-size: $font-0;
|
||||
line-height: $line-height-medium;
|
||||
padding: 4px;
|
||||
background-color: $primary-low;
|
||||
}
|
||||
.badge-errors,
|
||||
.badge-query-plan {
|
||||
font-size: $font-down-1;
|
||||
line-height: $line-height-medium;
|
||||
padding: 4px;
|
||||
padding: 5px;
|
||||
background-color: $primary-low;
|
||||
}
|
||||
.count-warning {
|
||||
background-color: dark-light-diff(
|
||||
rgba($danger, 0.7),
|
||||
$secondary,
|
||||
50%,
|
||||
-60%
|
||||
);
|
||||
margin: 0 0 7px 0;
|
||||
padding: 10px 20px;
|
||||
background-color: $danger-low;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -122,28 +182,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.badge-groupings {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 10px 3px;
|
||||
|
||||
.badge-grouping-item {
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge-grouping {
|
||||
.badge-grouping-name-input {
|
||||
margin: 0;
|
||||
// mobile specific styles - mostly commmon style overrides
|
||||
// TODO move to mobile sheet once mobile view has a seprate template.
|
||||
.mobile-view {
|
||||
.admin-badges {
|
||||
.badges {
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
float: right;
|
||||
.btn {
|
||||
padding: 3px 6px;
|
||||
.content-list {
|
||||
flex: 0 0 100%;
|
||||
.admin-badge-list {
|
||||
max-height: 40vh;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.badge-intro {
|
||||
flex: 0 1 75%;
|
||||
}
|
||||
.current-badge {
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,15 +8,16 @@
|
|||
align-items: center;
|
||||
background-color: $secondary;
|
||||
margin: 0 0 3px;
|
||||
.d-icon {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.badge-display-name {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
&.badge-type-gold .fa {
|
||||
color: $gold !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4115,6 +4115,11 @@ en:
|
|||
with_post: <span class="username">%{username}</span> for post in %{link}
|
||||
with_post_time: <span class="username">%{username}</span> for post in %{link} at <span class="time">%{time}</span>
|
||||
with_time: <span class="username">%{username}</span> at <span class="time">%{time}</span>
|
||||
badge_intro:
|
||||
title: 'Select an existing badge or create a new one to get started'
|
||||
what_are_badges_title: 'What are badges?'
|
||||
badge_query_examples_title: 'Badge query examples'
|
||||
|
||||
|
||||
emoji:
|
||||
title: "Emoji"
|
||||
|
|
|
|||
Loading…
Reference in New Issue