UX: reworks various menus to homogenize them (#9905)
- bookmark modal menu - topic-footer-mobile-dropdown - post-admin-menu - topic-admin-menu - quick-access menus - toolbar-popup-menu
This commit is contained in:
Joffrey JAFFEUX
GitHub
parent
ef5320dd47
commit
31d1468922
|
|
@ -10,7 +10,6 @@
|
|||
onOpen=(action b.action b)
|
||||
class=b.className
|
||||
options=(hash
|
||||
popupTitle=b.title
|
||||
icon=b.icon
|
||||
focusAfterOnChange=false
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import I18n from "I18n";
|
||||
import { createWidget } from "discourse/widgets/widget";
|
||||
import { h } from "virtual-dom";
|
||||
import { ButtonClass } from "discourse/widgets/button";
|
||||
|
|
@ -8,6 +7,20 @@ createWidget(
|
|||
jQuery.extend(ButtonClass, { tagName: "li.btn" })
|
||||
);
|
||||
|
||||
createWidget("post-admin-menu-button", {
|
||||
tagName: "li",
|
||||
|
||||
html(attrs) {
|
||||
return this.attach("button", {
|
||||
className: attrs.className,
|
||||
action: attrs.action,
|
||||
icon: attrs.icon,
|
||||
label: attrs.label,
|
||||
secondaryAction: attrs.secondaryAction
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export function buildManageButtons(attrs, currentUser, siteSettings) {
|
||||
if (!currentUser) {
|
||||
return [];
|
||||
|
|
@ -27,7 +40,7 @@ export function buildManageButtons(attrs, currentUser, siteSettings) {
|
|||
const buttonAtts = {
|
||||
action: "togglePostType",
|
||||
icon: "shield-alt",
|
||||
className: "btn-default toggle-post-type"
|
||||
className: "popup-menu-button toggle-post-type"
|
||||
};
|
||||
|
||||
if (attrs.isModeratorAction) {
|
||||
|
|
@ -44,14 +57,14 @@ export function buildManageButtons(attrs, currentUser, siteSettings) {
|
|||
icon: "user-shield",
|
||||
label: "post.controls.remove_post_notice",
|
||||
action: "removeNotice",
|
||||
className: "btn-default remove-notice"
|
||||
className: "popup-menu-button remove-notice"
|
||||
});
|
||||
} else {
|
||||
contents.push({
|
||||
icon: "user-shield",
|
||||
label: "post.controls.add_post_notice",
|
||||
action: "addNotice",
|
||||
className: "btn-default add-notice"
|
||||
className: "popup-menu-button add-notice"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -61,7 +74,7 @@ export function buildManageButtons(attrs, currentUser, siteSettings) {
|
|||
icon: "far-eye",
|
||||
label: "post.controls.unhide",
|
||||
action: "unhidePost",
|
||||
className: "btn-default unhide-post"
|
||||
className: "popup-menu-button unhide-post"
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -70,7 +83,7 @@ export function buildManageButtons(attrs, currentUser, siteSettings) {
|
|||
icon: "user",
|
||||
label: "post.controls.change_owner",
|
||||
action: "changePostOwner",
|
||||
className: "btn-default change-owner"
|
||||
className: "popup-menu-button change-owner"
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -80,7 +93,7 @@ export function buildManageButtons(attrs, currentUser, siteSettings) {
|
|||
icon: "certificate",
|
||||
label: "post.controls.grant_badge",
|
||||
action: "grantBadge",
|
||||
className: "btn-default grant-badge"
|
||||
className: "popup-menu-button grant-badge"
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +103,7 @@ export function buildManageButtons(attrs, currentUser, siteSettings) {
|
|||
label: "post.controls.unlock_post",
|
||||
action: "unlockPost",
|
||||
title: "post.controls.unlock_post_description",
|
||||
className: "btn-default unlock-post"
|
||||
className: "popup-menu-button unlock-post"
|
||||
});
|
||||
} else {
|
||||
contents.push({
|
||||
|
|
@ -98,7 +111,7 @@ export function buildManageButtons(attrs, currentUser, siteSettings) {
|
|||
label: "post.controls.lock_post",
|
||||
action: "lockPost",
|
||||
title: "post.controls.lock_post_description",
|
||||
className: "btn-default lock-post"
|
||||
className: "popup-menu-button lock-post"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -109,14 +122,14 @@ export function buildManageButtons(attrs, currentUser, siteSettings) {
|
|||
action: "toggleWiki",
|
||||
label: "post.controls.unwiki",
|
||||
icon: "far-edit",
|
||||
className: "btn-default wiki wikied"
|
||||
className: "popup-menu-button wiki wikied"
|
||||
});
|
||||
} else {
|
||||
contents.push({
|
||||
action: "toggleWiki",
|
||||
label: "post.controls.wiki",
|
||||
icon: "far-edit",
|
||||
className: "btn-default wiki"
|
||||
className: "popup-menu-button wiki"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -126,7 +139,7 @@ export function buildManageButtons(attrs, currentUser, siteSettings) {
|
|||
icon: "file",
|
||||
label: "post.controls.publish_page",
|
||||
action: "showPagePublish",
|
||||
className: "btn-default publish-page"
|
||||
className: "popup-menu-button publish-page"
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -135,7 +148,7 @@ export function buildManageButtons(attrs, currentUser, siteSettings) {
|
|||
icon: "cog",
|
||||
label: "post.controls.rebake",
|
||||
action: "rebakePost",
|
||||
className: "btn-default rebuild-html"
|
||||
className: "popup-menu-button rebuild-html"
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -147,7 +160,6 @@ export default createWidget("post-admin-menu", {
|
|||
|
||||
html() {
|
||||
const contents = [];
|
||||
contents.push(h("h3", I18n.t("admin_title")));
|
||||
|
||||
buildManageButtons(this.attrs, this.currentUser, this.siteSettings).forEach(
|
||||
b => {
|
||||
|
|
@ -156,7 +168,7 @@ export default createWidget("post-admin-menu", {
|
|||
}
|
||||
);
|
||||
|
||||
return contents;
|
||||
return h("ul", contents);
|
||||
},
|
||||
|
||||
clickOutside() {
|
||||
|
|
|
|||
|
|
@ -1,32 +1,33 @@
|
|||
import I18n from "I18n";
|
||||
import { createWidget, applyDecorators } from "discourse/widgets/widget";
|
||||
import { h } from "virtual-dom";
|
||||
|
||||
createWidget("admin-menu-button", {
|
||||
tagName: "li",
|
||||
|
||||
buildClasses(attrs) {
|
||||
return attrs.className;
|
||||
},
|
||||
|
||||
html(attrs) {
|
||||
let className;
|
||||
if (attrs.buttonClass) {
|
||||
className = attrs.buttonClass;
|
||||
}
|
||||
|
||||
return h(
|
||||
"li",
|
||||
{ className: attrs.className },
|
||||
this.attach("button", {
|
||||
className,
|
||||
action: attrs.action,
|
||||
url: attrs.url,
|
||||
icon: attrs.icon,
|
||||
label: attrs.fullLabel || `topic.${attrs.label}`,
|
||||
secondaryAction: "hideAdminMenu"
|
||||
})
|
||||
);
|
||||
return this.attach("button", {
|
||||
className,
|
||||
action: attrs.action,
|
||||
url: attrs.url,
|
||||
icon: attrs.icon,
|
||||
label: attrs.fullLabel || `topic.${attrs.label}`,
|
||||
secondaryAction: "hideAdminMenu"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
createWidget("topic-admin-menu-button", {
|
||||
tagName: "span",
|
||||
buildKey: () => `topic-admin-menu-button`,
|
||||
buildKey: () => "topic-admin-menu-button",
|
||||
|
||||
defaultState() {
|
||||
return { expanded: false, position: null };
|
||||
|
|
@ -52,7 +53,7 @@ createWidget("topic-admin-menu-button", {
|
|||
result.push(
|
||||
this.attach("button", {
|
||||
className:
|
||||
"btn-default toggle-admin-menu" +
|
||||
"popup-menu-button toggle-admin-menu" +
|
||||
(attrs.fixed ? " show-topic-admin" : "") +
|
||||
(attrs.addKeyboardTargetClass ? " keyboard-target-admin-menu" : ""),
|
||||
title: "topic_admin_menu",
|
||||
|
|
@ -103,7 +104,8 @@ createWidget("topic-admin-menu-button", {
|
|||
}
|
||||
|
||||
if (this.site.mobileView && !this.attrs.rightSide) {
|
||||
$(".header-cloak").css("display", "block");
|
||||
const headerCloak = document.querySelector(".header-cloak");
|
||||
if (headerCloak) headerCloak.style.display = "block";
|
||||
}
|
||||
|
||||
this.state.position = position;
|
||||
|
|
@ -134,7 +136,7 @@ export default createWidget("topic-admin-menu", {
|
|||
if (this.currentUser && this.currentUser.get("canManageTopic")) {
|
||||
this.addActionButton({
|
||||
className: "topic-admin-multi-select",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
action: "toggleMultiSelect",
|
||||
icon: "tasks",
|
||||
label: "actions.multi_select"
|
||||
|
|
@ -143,7 +145,7 @@ export default createWidget("topic-admin-menu", {
|
|||
if (details.get("can_delete")) {
|
||||
this.addActionButton({
|
||||
className: "topic-admin-delete",
|
||||
buttonClass: "btn-danger",
|
||||
buttonClass: "popup-menu-btn-danger",
|
||||
action: "deleteTopic",
|
||||
icon: "far-trash-alt",
|
||||
label: "actions.delete"
|
||||
|
|
@ -153,7 +155,7 @@ export default createWidget("topic-admin-menu", {
|
|||
if (topic.get("deleted") && details.get("can_recover")) {
|
||||
this.addActionButton({
|
||||
className: "topic-admin-recover",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
action: "recoverTopic",
|
||||
icon: "undo",
|
||||
label: "actions.recover"
|
||||
|
|
@ -163,7 +165,7 @@ export default createWidget("topic-admin-menu", {
|
|||
if (topic.get("closed")) {
|
||||
this.addActionButton({
|
||||
className: "topic-admin-open",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
action: "toggleClosed",
|
||||
icon: "unlock",
|
||||
label: "actions.open"
|
||||
|
|
@ -171,7 +173,7 @@ export default createWidget("topic-admin-menu", {
|
|||
} else {
|
||||
this.addActionButton({
|
||||
className: "topic-admin-close",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
action: "toggleClosed",
|
||||
icon: "lock",
|
||||
label: "actions.close"
|
||||
|
|
@ -180,7 +182,7 @@ export default createWidget("topic-admin-menu", {
|
|||
|
||||
this.addActionButton({
|
||||
className: "topic-admin-status-update",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
action: "showTopicStatusUpdate",
|
||||
icon: "far-clock",
|
||||
label: "actions.timed_update"
|
||||
|
|
@ -189,7 +191,7 @@ export default createWidget("topic-admin-menu", {
|
|||
if (!isPrivateMessage && (topic.get("visible") || featured)) {
|
||||
this.addActionButton({
|
||||
className: "topic-admin-pin",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
action: "showFeatureTopic",
|
||||
icon: "thumbtack",
|
||||
label: featured ? "actions.unpin" : "actions.pin"
|
||||
|
|
@ -199,7 +201,7 @@ export default createWidget("topic-admin-menu", {
|
|||
if (this.currentUser.get("staff")) {
|
||||
this.addActionButton({
|
||||
className: "topic-admin-change-timestamp",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
action: "showChangeTimestamp",
|
||||
icon: "calendar-alt",
|
||||
label: "change_timestamp.title"
|
||||
|
|
@ -208,7 +210,7 @@ export default createWidget("topic-admin-menu", {
|
|||
|
||||
this.addActionButton({
|
||||
className: "topic-admin-reset-bump-date",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
action: "resetBumpDate",
|
||||
icon: "anchor",
|
||||
label: "actions.reset_bump_date"
|
||||
|
|
@ -217,7 +219,7 @@ export default createWidget("topic-admin-menu", {
|
|||
if (!isPrivateMessage) {
|
||||
this.addActionButton({
|
||||
className: "topic-admin-archive",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
action: "toggleArchived",
|
||||
icon: "folder",
|
||||
label: topic.get("archived") ? "actions.unarchive" : "actions.archive"
|
||||
|
|
@ -226,7 +228,7 @@ export default createWidget("topic-admin-menu", {
|
|||
|
||||
this.addActionButton({
|
||||
className: "topic-admin-visible",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
action: "toggleVisibility",
|
||||
icon: visible ? "far-eye-slash" : "far-eye",
|
||||
label: visible ? "actions.invisible" : "actions.visible"
|
||||
|
|
@ -235,7 +237,7 @@ export default createWidget("topic-admin-menu", {
|
|||
if (details.get("can_convert_topic")) {
|
||||
this.addActionButton({
|
||||
className: "topic-admin-convert",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
action: isPrivateMessage
|
||||
? "convertToPublicTopic"
|
||||
: "convertToPrivateMessage",
|
||||
|
|
@ -249,7 +251,7 @@ export default createWidget("topic-admin-menu", {
|
|||
if (this.currentUser.get("staff")) {
|
||||
this.addActionButton({
|
||||
icon: "list",
|
||||
buttonClass: "btn-default",
|
||||
buttonClass: "popup-menu-btn",
|
||||
fullLabel: "review.moderation_history",
|
||||
url: `/review?topic_id=${topic.id}&status=all`
|
||||
});
|
||||
|
|
@ -300,26 +302,13 @@ export default createWidget("topic-admin-menu", {
|
|||
this.attrs,
|
||||
this.state
|
||||
);
|
||||
return [
|
||||
h("div.header", [
|
||||
h("h3", I18n.t("topic.actions.title")),
|
||||
h(
|
||||
"div",
|
||||
this.attach("button", {
|
||||
action: "clickOutside",
|
||||
icon: "times",
|
||||
className: "close-button"
|
||||
})
|
||||
)
|
||||
]),
|
||||
h(
|
||||
"ul",
|
||||
attrs.actionButtons
|
||||
.concat(extraButtons)
|
||||
.filter(Boolean)
|
||||
.map(b => this.attach("admin-menu-button", b))
|
||||
)
|
||||
];
|
||||
return h(
|
||||
"ul",
|
||||
attrs.actionButtons
|
||||
.concat(extraButtons)
|
||||
.filter(Boolean)
|
||||
.map(b => this.attach("admin-menu-button", b))
|
||||
);
|
||||
},
|
||||
|
||||
clickOutside() {
|
||||
|
|
|
|||
|
|
@ -359,7 +359,7 @@ createWidget("timeline-footer-controls", {
|
|||
if (topic.get("details.can_create_post")) {
|
||||
controls.push(
|
||||
this.attach("button", {
|
||||
className: "btn-default create",
|
||||
className: "btn-default create reply-to-post",
|
||||
icon: "reply",
|
||||
title: "topic.reply.help",
|
||||
action: "replyToPost"
|
||||
|
|
|
|||
|
|
@ -1,36 +1,16 @@
|
|||
import I18n from "I18n";
|
||||
import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
|
||||
|
||||
const HEADING_COLLECTION = "HEADING_COLLECTION";
|
||||
|
||||
export default DropdownSelectBoxComponent.extend({
|
||||
pluginApiIdentifiers: ["toolbar-popup-menu-options"],
|
||||
classNames: ["toolbar-popup-menu-options"],
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.prependCollection(HEADING_COLLECTION);
|
||||
},
|
||||
|
||||
selectKitOptions: {
|
||||
showFullTitle: false,
|
||||
filterable: false,
|
||||
autoFilterable: false
|
||||
},
|
||||
|
||||
modifyContentForCollection(collection) {
|
||||
if (collection === HEADING_COLLECTION) {
|
||||
return { title: this.selectKit.options.popupTitle };
|
||||
}
|
||||
},
|
||||
|
||||
modifyComponentForCollection(collection) {
|
||||
if (collection === HEADING_COLLECTION) {
|
||||
return "toolbar-popup-menu-options/toolbar-popup-menu-options-heading";
|
||||
}
|
||||
},
|
||||
|
||||
modifyContent(contents) {
|
||||
return contents
|
||||
.map(content => {
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
import Component from "@ember/component";
|
||||
import { reads } from "@ember/object/computed";
|
||||
|
||||
export default Component.extend({
|
||||
tagName: "h3",
|
||||
layoutName:
|
||||
"select-kit/templates/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading",
|
||||
classNames: ["toolbar-popup-menu-options-heading"],
|
||||
heading: reads("collection.content.title")
|
||||
});
|
||||
|
|
@ -66,14 +66,20 @@
|
|||
.menu-panel {
|
||||
li,
|
||||
li.heading {
|
||||
a.widget-link {
|
||||
a.widget-link,
|
||||
a.categories-link {
|
||||
padding: 0.25em 0.5em;
|
||||
display: block;
|
||||
color: $primary;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $highlight-medium;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.new {
|
||||
|
|
@ -83,11 +89,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.categories-link {
|
||||
display: block;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
li.category-link {
|
||||
float: left;
|
||||
background-color: transparent;
|
||||
|
|
@ -101,6 +102,10 @@
|
|||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
|
||||
.category-name {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge-notification {
|
||||
|
|
@ -163,6 +168,7 @@
|
|||
.icon {
|
||||
color: $primary-high;
|
||||
}
|
||||
|
||||
li {
|
||||
background-color: $tertiary-low;
|
||||
|
||||
|
|
@ -184,6 +190,7 @@
|
|||
|
||||
a {
|
||||
padding: 0;
|
||||
|
||||
> div {
|
||||
overflow: hidden; // clears the text from wrapping below icons
|
||||
overflow-wrap: anywhere;
|
||||
|
|
@ -204,11 +211,14 @@
|
|||
}
|
||||
}
|
||||
li:not(.show-all) {
|
||||
padding: 0.25em 0.5em;
|
||||
padding: 0;
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
.d-icon {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
padding-top: 0.2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
.is-warning {
|
||||
|
|
@ -246,6 +256,18 @@
|
|||
}
|
||||
/* as a big ol' click target, don't let text inside be selected */
|
||||
@include unselectable;
|
||||
|
||||
&.quick-access-profile {
|
||||
li:not(.show-all) a {
|
||||
color: $primary;
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
}
|
||||
|
||||
// accounts for menu "ears" 4px + border 1px
|
||||
padding: 0.25em calc(0.5em + 4px + 1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dismiss-link {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
.popup-menu {
|
||||
background-color: $secondary;
|
||||
width: 215px;
|
||||
border: 1px solid $primary-low;
|
||||
z-index: z("dropdown");
|
||||
box-shadow: shadow("card");
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid rgba($primary-low, 0.5);
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
text-align: left;
|
||||
background: none;
|
||||
width: 100%;
|
||||
padding: 0.75em;
|
||||
border-radius: 0;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
background: $tertiary-low;
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
|
||||
&.popup-menu-btn-danger {
|
||||
.d-icon {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
.d-button-label {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.d-icon,
|
||||
.d-button-label {
|
||||
color: $danger;
|
||||
}
|
||||
background: $danger-low;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -68,6 +68,10 @@
|
|||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
a.widget-link {
|
||||
color: $tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.main-results {
|
||||
|
|
|
|||
|
|
@ -1,41 +1,6 @@
|
|||
// Styles for the topic admin menu
|
||||
|
||||
.show-topic-admin {
|
||||
position: fixed;
|
||||
top: 120px;
|
||||
right: 10px;
|
||||
z-index: z("dropdown");
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.popup-menu {
|
||||
background-color: $secondary;
|
||||
width: 215px;
|
||||
padding: 10px;
|
||||
border: 1px solid $primary-low;
|
||||
z-index: z("dropdown");
|
||||
box-shadow: shadow("card");
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.header {
|
||||
.close-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-admin-popup-menu {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
|
@ -51,19 +16,6 @@
|
|||
}
|
||||
}
|
||||
animation: slideUp 0.3s;
|
||||
|
||||
.header {
|
||||
padding: 10px 0 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.close-button {
|
||||
display: block;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-view & {
|
||||
|
|
@ -71,6 +23,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.show-topic-admin {
|
||||
position: fixed;
|
||||
top: 120px;
|
||||
right: 10px;
|
||||
z-index: z("dropdown");
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.modal-body.feature-topic {
|
||||
max-height: 500px;
|
||||
input.date-picker {
|
||||
|
|
|
|||
|
|
@ -833,12 +833,6 @@ a.mention-group {
|
|||
}
|
||||
}
|
||||
|
||||
.popup-menu {
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.suggested-topics {
|
||||
.topics {
|
||||
padding-bottom: 15px;
|
||||
|
|
@ -1053,3 +1047,15 @@ a.mention-group {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-admin-menu {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
width: auto;
|
||||
max-width: 320px;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
bottom: -2px;
|
||||
right: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
}
|
||||
|
||||
.ember-text-field.bookmark-name {
|
||||
min-width: 220px;
|
||||
width: 100%;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,17 @@
|
|||
|
||||
.tap-tile {
|
||||
color: $primary-high;
|
||||
padding: 0.75em;
|
||||
padding: 0.75em 0.25em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
border: 1px solid $primary-low;
|
||||
margin: 0 0 0.5em;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid $primary-low;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tertiary-low;
|
||||
}
|
||||
|
|
@ -21,12 +24,12 @@
|
|||
}
|
||||
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
color: $primary-high;
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
.tap-tile-title {
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,52 +3,32 @@
|
|||
&.toolbar-popup-menu-options {
|
||||
.select-kit-body {
|
||||
box-shadow: none;
|
||||
padding: 0.5em 0.5em 0.25em 0.5em;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.toolbar-popup-menu-options-heading {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.select-kit-row {
|
||||
margin-bottom: 0.25em;
|
||||
padding: 0.5em 0.25em;
|
||||
background: $primary-low;
|
||||
transition: all 0.25s;
|
||||
padding: 0.75em 0.5em;
|
||||
border-bottom: 1px solid rgba($primary-low, 0.5);
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.texts .name,
|
||||
.icons .d-icon {
|
||||
font-size: $font-0;
|
||||
font-weight: normal;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.is-highlighted {
|
||||
background: $primary-medium;
|
||||
|
||||
.name,
|
||||
.d-icon {
|
||||
color: $secondary;
|
||||
}
|
||||
color: $primary-high;
|
||||
}
|
||||
|
||||
&.is-highlighted,
|
||||
&.is-selected,
|
||||
&:hover {
|
||||
background: $primary-medium;
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
color: $primary;
|
||||
background: $primary-low;
|
||||
}
|
||||
|
||||
&.is-selected.is-highlighted {
|
||||
background: $primary-medium;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -178,10 +178,6 @@
|
|||
|
||||
.timeline-controls {
|
||||
margin-bottom: 1em;
|
||||
|
||||
button {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-footer-controls {
|
||||
|
|
@ -189,7 +185,7 @@
|
|||
transition: opacity 0.2s ease-in;
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
.reply-to-post {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,93 +53,6 @@ section.post-menu-area {
|
|||
nav.post-controls {
|
||||
padding: 0;
|
||||
|
||||
// Some buttons can be doubled up, like likes or flags
|
||||
.double-button {
|
||||
display: inline-flex;
|
||||
color: $primary-low-mid;
|
||||
margin-right: 0.15em;
|
||||
&:hover {
|
||||
button {
|
||||
background: $primary-low;
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
button {
|
||||
// It looks really confusing when one half a double button has an inner shadow on click.
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
&.my-likes,
|
||||
&.read-indicator,
|
||||
&.regular-likes {
|
||||
// Like count on posts
|
||||
.d-icon {
|
||||
color: $primary-low-mid;
|
||||
padding-left: 0.45em;
|
||||
}
|
||||
}
|
||||
&.like {
|
||||
// Like button with 0 likes
|
||||
&.d-hover {
|
||||
background: $love-low;
|
||||
.d-icon {
|
||||
color: $love;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.has-like {
|
||||
// Like button after I've liked
|
||||
.d-icon {
|
||||
color: $love;
|
||||
}
|
||||
&.d-hover {
|
||||
background: $primary-low;
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
// Disabled like button
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&.button-count {
|
||||
// Like count button
|
||||
&:not(.my-likes) {
|
||||
padding-right: 0;
|
||||
}
|
||||
&.d-hover {
|
||||
color: $primary;
|
||||
}
|
||||
+ .toggle-like {
|
||||
// Like button when like count is present
|
||||
padding-left: 0.45em;
|
||||
&.d-hover {
|
||||
background: $primary-low;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a,
|
||||
button {
|
||||
color: dark-light-choose($primary-low-mid, $secondary-high);
|
||||
.d-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
margin-right: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
a.toggle-likes {
|
||||
padding: 8px 0;
|
||||
margin-right: -3px;
|
||||
}
|
||||
span.badge-posts {
|
||||
margin-right: 5px;
|
||||
transition: all linear 0.15s;
|
||||
}
|
||||
.actions {
|
||||
text-align: right;
|
||||
float: right;
|
||||
|
|
@ -148,100 +61,157 @@ nav.post-controls {
|
|||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.show-replies {
|
||||
margin-left: -10px;
|
||||
font-size: inherit;
|
||||
span.badge-posts {
|
||||
color: dark-light-choose($primary-medium, $secondary-high);
|
||||
|
||||
// Some buttons can be doubled up, like likes or flags
|
||||
.double-button {
|
||||
display: inline-flex;
|
||||
color: $primary-low-mid;
|
||||
margin-right: 0.15em;
|
||||
&:hover {
|
||||
button {
|
||||
background: $primary-low;
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
button {
|
||||
// It looks really confusing when one half a double button has an inner shadow on click.
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
&.my-likes,
|
||||
&.read-indicator,
|
||||
&.regular-likes {
|
||||
// Like count on posts
|
||||
.d-icon {
|
||||
color: $primary-low-mid;
|
||||
padding-left: 0.45em;
|
||||
}
|
||||
}
|
||||
&.like {
|
||||
// Like button with 0 likes
|
||||
&.d-hover {
|
||||
background: $love-low;
|
||||
.d-icon {
|
||||
color: $love;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.has-like {
|
||||
// Like button after I've liked
|
||||
.d-icon {
|
||||
color: $love;
|
||||
}
|
||||
&.d-hover {
|
||||
background: $primary-low;
|
||||
.d-icon {
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
// Disabled like button
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&.button-count {
|
||||
// Like count button
|
||||
&:not(.my-likes) {
|
||||
padding-right: 0;
|
||||
}
|
||||
&.d-hover {
|
||||
color: $primary;
|
||||
}
|
||||
+ .toggle-like {
|
||||
// Like button when like count is present
|
||||
padding-left: 0.45em;
|
||||
&.d-hover {
|
||||
background: $primary-low;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: $primary-low;
|
||||
a,
|
||||
button {
|
||||
color: dark-light-choose($primary-low-mid, $secondary-high);
|
||||
.d-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
margin-right: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
a.toggle-likes {
|
||||
padding: 8px 0;
|
||||
margin-right: -3px;
|
||||
}
|
||||
span.badge-posts {
|
||||
margin-right: 5px;
|
||||
transition: all linear 0.15s;
|
||||
}
|
||||
.show-replies {
|
||||
margin-left: -10px;
|
||||
font-size: inherit;
|
||||
span.badge-posts {
|
||||
color: dark-light-choose($primary-medium, $secondary-high);
|
||||
}
|
||||
&:hover {
|
||||
background: $primary-low;
|
||||
span.badge-posts {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.d-icon {
|
||||
margin-left: 5px;
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
}
|
||||
button.create {
|
||||
margin-right: 0;
|
||||
color: dark-light-choose($primary-high, $secondary-low);
|
||||
margin-left: 10px;
|
||||
.d-icon {
|
||||
color: dark-light-choose($primary-high, $secondary-low);
|
||||
}
|
||||
}
|
||||
.create .d-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
button {
|
||||
font-size: $font-up-1;
|
||||
padding: 8px 10px;
|
||||
vertical-align: top;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-left: 3px;
|
||||
&.d-hover,
|
||||
&:focus {
|
||||
background: $primary-low;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.d-icon {
|
||||
margin-left: 5px;
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
}
|
||||
button.create {
|
||||
margin-right: 0;
|
||||
color: dark-light-choose($primary-high, $secondary-low);
|
||||
margin-left: 10px;
|
||||
.d-icon {
|
||||
color: dark-light-choose($primary-high, $secondary-low);
|
||||
}
|
||||
}
|
||||
.create .d-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
button {
|
||||
font-size: $font-up-1;
|
||||
padding: 8px 10px;
|
||||
vertical-align: top;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-left: 3px;
|
||||
&.d-hover,
|
||||
&:focus {
|
||||
background: $primary-low;
|
||||
color: $primary;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
&.admin {
|
||||
position: relative;
|
||||
}
|
||||
&.delete.d-hover,
|
||||
&.delete:hover,
|
||||
&.delete:focus {
|
||||
background: $danger;
|
||||
color: $secondary;
|
||||
.d-icon {
|
||||
&:active {
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
&.admin {
|
||||
position: relative;
|
||||
}
|
||||
&.delete.d-hover,
|
||||
&.delete:hover,
|
||||
&.delete:focus {
|
||||
background: $danger;
|
||||
color: $secondary;
|
||||
.d-icon {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bookmark {
|
||||
padding: 8px 11px;
|
||||
&.bookmarked .d-icon {
|
||||
color: $tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-admin-menu {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: $secondary;
|
||||
width: auto;
|
||||
max-width: 320px;
|
||||
padding: 10px;
|
||||
border: 1px solid $primary-low;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
bottom: -2px;
|
||||
right: 15px;
|
||||
z-index: z("dropdown");
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
color: $primary;
|
||||
font-size: $font-0;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
.d-icon {
|
||||
width: 14px;
|
||||
margin-right: 10px;
|
||||
&.bookmark {
|
||||
padding: 8px 11px;
|
||||
&.bookmarked .d-icon {
|
||||
color: $tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,25 @@
|
|||
&.combo-box {
|
||||
&.topic-footer-mobile-dropdown {
|
||||
.select-kit-row {
|
||||
.svg-icon-title {
|
||||
margin-right: 0.5em;
|
||||
padding: 0.75em 0.5em;
|
||||
border-bottom: 1px solid rgba($primary-low, 0.5);
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
color: $primary-high;
|
||||
}
|
||||
|
||||
&.is-highlighted {
|
||||
background: $primary-low;
|
||||
|
||||
.name {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.bookmarked {
|
||||
.d-icon {
|
||||
color: $tertiary;
|
||||
|
|
|
|||
|
|
@ -16,8 +16,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.user-menu .quick-access-profile li:not(.show-all) {
|
||||
margin: 0.5em 0 0.75em;
|
||||
padding: 0.75em;
|
||||
border: 1px solid $primary-low;
|
||||
.user-menu .quick-access-panel.quick-access-profile li:not(.show-all) {
|
||||
border-bottom: 1px solid $primary-low;
|
||||
|
||||
a {
|
||||
// accounts for menu "ears" 4px + border 1px
|
||||
padding: 0.75em calc(0.5em + 4px + 1px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,69 +31,70 @@ span.badge-posts {
|
|||
color: dark-light-choose($primary-low-mid, $secondary-high);
|
||||
.actions {
|
||||
display: flex;
|
||||
}
|
||||
// Handles the like and flag buttons in the post menu.
|
||||
.double-button {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
align-items: center;
|
||||
button {
|
||||
&.like,
|
||||
&.read-indicator,
|
||||
&.create-flag {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
&.button-count {
|
||||
padding: 8px 4px 8px 8px;
|
||||
+ .toggle-like,
|
||||
+ .create-flag {
|
||||
padding: 8px 8px 8px 4px;
|
||||
|
||||
// Handles the like and flag buttons in the post menu.
|
||||
.double-button {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
align-items: center;
|
||||
button {
|
||||
&.like,
|
||||
&.read-indicator,
|
||||
&.create-flag {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
&.my-likes,
|
||||
&.regular-likes {
|
||||
display: flex;
|
||||
max-width: unset;
|
||||
padding: 8px;
|
||||
.d-icon {
|
||||
padding-left: 8px;
|
||||
&.button-count {
|
||||
padding: 8px 4px 8px 8px;
|
||||
+ .toggle-like,
|
||||
+ .create-flag {
|
||||
padding: 8px 8px 8px 4px;
|
||||
}
|
||||
&.my-likes,
|
||||
&.regular-likes {
|
||||
display: flex;
|
||||
max-width: unset;
|
||||
padding: 8px;
|
||||
.d-icon {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.d-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
font-size: $font-up-1;
|
||||
padding: 10px 8px;
|
||||
background: transparent;
|
||||
flex: 1 1 auto;
|
||||
max-width: 45px;
|
||||
&.hidden {
|
||||
display: none;
|
||||
.d-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
&.admin {
|
||||
position: relative;
|
||||
}
|
||||
&.expand-post {
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
&.reply {
|
||||
.d-icon {
|
||||
color: $primary-high;
|
||||
button {
|
||||
border: none;
|
||||
font-size: $font-up-1;
|
||||
padding: 10px 8px;
|
||||
background: transparent;
|
||||
flex: 1 1 auto;
|
||||
max-width: 45px;
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
margin-left: auto;
|
||||
}
|
||||
&.has-like {
|
||||
.d-icon {
|
||||
color: $love;
|
||||
&.admin {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
&.bookmarked {
|
||||
.d-icon {
|
||||
color: $tertiary;
|
||||
&.expand-post {
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
&.reply {
|
||||
.d-icon {
|
||||
color: $primary-high;
|
||||
}
|
||||
margin-left: auto;
|
||||
}
|
||||
&.has-like {
|
||||
.d-icon {
|
||||
color: $love;
|
||||
}
|
||||
}
|
||||
&.bookmarked {
|
||||
.d-icon {
|
||||
color: $tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,38 +102,11 @@ span.badge-posts {
|
|||
}
|
||||
|
||||
.post-admin-menu {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: $secondary;
|
||||
width: auto;
|
||||
max-width: 320px;
|
||||
padding: 10px;
|
||||
border: 1px solid $primary-low;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
bottom: -50px;
|
||||
left: 135px;
|
||||
@media screen and (max-width: 374px) {
|
||||
left: 50px;
|
||||
}
|
||||
z-index: z("dropdown");
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
color: $primary;
|
||||
font-size: $font-0;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
.d-icon {
|
||||
width: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embedded-posts {
|
||||
|
|
@ -466,22 +440,6 @@ span.highlighted {
|
|||
}
|
||||
}
|
||||
|
||||
.popup-menu,
|
||||
#topic-footer-buttons .popup-menu {
|
||||
h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul div li {
|
||||
border-bottom: 0.25em solid transparent;
|
||||
border-top: 0.25em solid transparent;
|
||||
|
||||
button.btn {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-notice {
|
||||
margin-bottom: 1em;
|
||||
&.old {
|
||||
|
|
|
|||
Loading…
Reference in New Issue