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

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

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

48
assets/stylesheets/explorer.scss
View File

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