github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-02 05:45:57 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Switch ellipsis direction when expanding web hook event details.

Browse Source
This commit is contained in:
Guo Xiang Tan 2019-04-16 14:24:30 +08:00
parent 8cb1890245
commit 347663e852
3 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/assets/javascripts/admin/components/admin-web-hook-event.js.es6
View File

@ -6,6 +6,8 @@ import { ensureJSON, plainJSON, prettyJSON } from "discourse/lib/formatter";
export default Ember.Component.extend({ export default Ember.Component.extend({
tagName: "li", tagName: "li",
expandDetails: null, expandDetails: null,
expandDetailsRequestKey: "request",
expandDetailsResponseKey: "response",
@computed("model.status") @computed("model.status")
statusColorClasses(status) { statusColorClasses(status) {
@ -29,6 +31,20 @@ export default Ember.Component.extend({
return I18n.t("admin.web_hooks.events.completed_in", { count: seconds }); return I18n.t("admin.web_hooks.events.completed_in", { count: seconds });
}, },
@computed("expandDetails")
expandRequestIcon(expandDetails) {
return expandDetails === this.get("expandDetailsRequestKey")
? "ellipsis-h"
: "ellipsis-v";
},
@computed("expandDetails")
expandResponseIcon(expandDetails) {
return expandDetails === this.get("expandDetailsResponseKey")
? "ellipsis-h"
: "ellipsis-v";
},
actions: { actions: {
redeliver() { redeliver() {
return bootbox.confirm( return bootbox.confirm(
@ -53,7 +69,7 @@ export default Ember.Component.extend({
}, },
toggleRequest() { toggleRequest() {
const expandDetailsKey = "request"; const expandDetailsKey = this.get("expandDetailsRequestKey");
if (this.get("expandDetails") !== expandDetailsKey) { if (this.get("expandDetails") !== expandDetailsKey) {
let headers = _.extend( let headers = _.extend(
@ -75,7 +91,7 @@ export default Ember.Component.extend({
}, },
toggleResponse() { toggleResponse() {
const expandDetailsKey = "response"; const expandDetailsKey = this.get("expandDetailsResponseKey");
if (this.get("expandDetails") !== expandDetailsKey) { if (this.get("expandDetails") !== expandDetailsKey) {
this.setProperties({ this.setProperties({

4
app/assets/javascripts/admin/templates/components/admin-web-hook-event.hbs
View File

@ -5,8 +5,8 @@
<div class="col timestamp">{{createdAt}}</div> <div class="col timestamp">{{createdAt}}</div>
<div class="col completion">{{completion}}</div> <div class="col completion">{{completion}}</div>
<div class="col actions"> <div class="col actions">
{{d-button icon="ellipsis-v" action=(action "toggleRequest") label="admin.web_hooks.events.request"}} {{d-button icon=expandRequestIcon action=(action "toggleRequest") label="admin.web_hooks.events.request"}}
{{d-button icon="ellipsis-v" action=(action "toggleResponse") label="admin.web_hooks.events.response"}} {{d-button icon=expandResponseIcon action=(action "toggleResponse") label="admin.web_hooks.events.response"}}
{{d-button icon="sync" action=(action "redeliver") label="admin.web_hooks.events.redeliver"}} {{d-button icon="sync" action=(action "redeliver") label="admin.web_hooks.events.redeliver"}}
</div> </div>
{{#if expandDetails}} {{#if expandDetails}}

8
app/assets/stylesheets/common/admin/api.scss
View File

@ -209,16 +209,16 @@ table.api-keys {
width: 90px; width: 90px;
} }
.col.event-id { .col.event-id {
width: 300px; width: 90px;
} }
.col.timestamp { .col.timestamp {
width: 150px; width: 180px;
} }
.col.completion { .col.completion {
width: 220px; width: 250px;
} }
.col.actions { .col.actions {
width: 305px; width: 455px;
padding-top: 0; padding-top: 0;
a { a {
text-decoration: underline; text-decoration: underline;