Discource-C
/
discourse-data-explorer
mirror of https://github.com/discourse/discourse-data-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Make Explorer UI similar to User Activity and Groups pages

This commit is contained in:
Rishabh Nambiar 2018-08-31 23:41:33 +05:30
parent c077a389e7
commit 5edb8ea7f8
3 changed files with 85 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6
View File

@ -11,13 +11,14 @@ export default Ember.Controller.extend({
showResults: false, showResults: false,
hideSchema: false, hideSchema: false,
loading: false, loading: false,
explain: false, explain: false,
saveDisabled: Ember.computed.not('selectedItem.dirty'), saveDisabled: Ember.computed.not('selectedItem.dirty'),
runDisabled: Ember.computed.alias('selectedItem.dirty'), runDisabled: Ember.computed.alias('selectedItem.dirty'),
results: Em.computed.alias('selectedItem.results'), results: Em.computed.alias('selectedItem.results'),
asc: null,
order: null,
editing: false, editing: false,
everEditing: false, everEditing: false,
showRecentQueries: true, showRecentQueries: true,
@ -98,8 +99,13 @@ export default Ember.Controller.extend({
}, },
goHome() { goHome() {
this.setProperties({
asc: null,
order: null,
selectedQueryId: null,
sortBy: ['last_run_at:desc']
});
this.send('refreshModel'); this.send('refreshModel');
this.set('selectedQueryId', null);
this.transitionToRoute('adminPlugins.explorer'); this.transitionToRoute('adminPlugins.explorer');
}, },

101
assets/javascripts/discourse/templates/admin/plugins-explorer.hbs
View File

@ -145,53 +145,60 @@
{{#if showRecentQueries}} {{#if showRecentQueries}}
{{#if sortedQueries.length}} {{#if sortedQueries.length}}
<table class="recent-queries"> <div class="container">
<thead class="heading-container"> <table class="recent-queries">
<th {{action "sortByProperty" "name"}} class="col heading name"> <thead class="heading-container">
{{d-icon "sort"}} <th class="col heading name">
{{i18n 'explorer.query_name'}} <div class="heading-toggle" {{action "sortByProperty" "name"}}>
</th> {{directory-toggle field="name" labelKey="explorer.query_name" order=order asc=asc}}
<th {{action "sortByProperty" "username"}} class="col heading user"> </div>
{{d-icon "sort"}} </th>
{{i18n 'explorer.query_user'}} <th class="col heading created-by" {{action "sortByProperty" "username"}}>
</th> <div class="heading-toggle">
<th {{action "sortByProperty" "last_run_at"}} class="col heading time"> {{directory-toggle field="username" labelKey="explorer.query_user" order=order asc=asc}}
{{d-icon "sort"}} </div>
{{i18n 'explorer.query_time'}} </th>
</th> <th class="col heading created-at" {{action "sortByProperty" "last_run_at"}}>
</thead> <div class="heading-toggle">
<tr></tr> {{directory-toggle field="last_run_at" labelKey="explorer.query_time" order=order asc=desc}}
{{#each sortedQueries as |query|}} </div>
<tr> </th>
<td> </thead>
<a {{action "scrollTop"}} href="/admin/plugins/explorer/?id={{query.id}}"> <tr></tr>
<b class="query-name">{{query.name}}</b> <tbody>
<br> {{#each sortedQueries as |query|}}
<medium class="query-desc">{{query.description}}</medium> <tr class="query-row">
<br> <td>
</a> <a {{action "scrollTop"}} href="/admin/plugins/explorer/?id={{query.id}}">
</td> <b class="query-name">{{query.name}}</b>
<td class="query-created-by"> <br>
{{#if query.username}} <medium class="query-desc">{{query.description}}</medium>
<a href="/users/{{query.username}}/activity"> <br>
<medium>{{query.username}}</medium> </a>
</a> </td>
{{/if}} <td class="query-created-by">
</td> {{#if query.username}}
<td class="query-created-at"> <a href="/users/{{query.username}}/activity">
{{#if query.last_run_at}} <medium>{{query.username}}</medium>
<medium> </a>
{{bound-date query.last_run_at}} {{/if}}
</medium> </td>
{{else}} <td class="query-created-at">
<medium> {{#if query.last_run_at}}
{{bound-date query.created_at}} <medium>
</medium> {{bound-date query.last_run_at}}
{{/if}} </medium>
</td> {{else}}
</tr> <medium>
{{/each}} {{bound-date query.created_at}}
</table> </medium>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/if}} {{/if}}
{{/if}} {{/if}}

48
assets/stylesheets/explorer.scss
View File

@ -222,37 +222,33 @@
} }
.recent-queries { .recent-queries {
tr a { tr {
display: inline-block; cursor: pointer;
width:100%;
height: 100%;
color: inherit;
} }
.time { tr a {
width: 15%; color: inherit;
text-align: center; display: inline-block;
} }
.user { .query-row a {
width: 20%; width: 100%;
text-align: center; }
.created-by {
width: 20%;
}
.created-at {
width: 15%;
}
.query-created-by {
color: $primary-high;
} }
.query-created-at { .query-created-at {
color: $secondary-medium; color: $secondary-medium;
font-weight: bold; font-weight: bold;
text-align: center;
vertical-align: middle;
}
.query-created-by {
color: $primary-high;
text-align: center;
vertical-align: middle;
} }
tr {
height: 2px;
}
.heading { .heading {
padding-top: 30px; position: relative;
color: $primary-high; color: $primary-high;
padding: 50px 0px 0px 0px;
} }
.query-name { .query-name {
color: $secondary-low; color: $secondary-low;
@ -260,8 +256,10 @@
.query-desc { .query-desc {
color: $primary-high; color: $primary-high;
} }
th:hover{ .heading-toggle {
cursor: pointer; bottom: 0;
position: absolute;
display: inline-block;
} }
} }