Skip to content

Commit

Permalink
[IMPROVE] Admin ui step 1 (RocketChat#13393)
Browse files Browse the repository at this point in the history 
Just few changes to update admin pages
  • Loading branch information
@ggazzo @Montel
ggazzo authored and Montel committed Feb 13, 2019
1 parent 8b0c135 commit 285d719
Show file tree
Hide file tree
Showing 35 changed files with 673 additions and 481 deletions.
3 changes: 1 addition & 2 deletions packages/rocketchat-authorization/client/route.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ FlowRouter.route('/admin/permissions', {
name: 'admin-permissions',
action(/* params*/) {
return BlazeLayout.render('main', {
center: 'pageContainer',
center: 'permissions',
pageTitle: t('Permissions'),
pageTemplate: 'permissions',
});
},
});
Expand Down
11 changes: 9 additions & 2 deletions packages/rocketchat-authorization/client/stylesheets/permissions.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,20 @@
}

& .permission-grid {
& table {
display: block;
overflow-x: auto;

white-space: nowrap;
}

& th {
position: relative;

padding-top: 20px;
padding: 20px;

text-align: center;
white-space: normal;
white-space: nowrap;
}

& td {
Expand Down
50 changes: 30 additions & 20 deletions packages/rocketchat-authorization/client/views/permissions.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,46 @@
<template name="permissions">
<div class="permissions-manager">
<section class="permissions-manager page-container page-home page-static page-list">
{{#if hasPermission}}
<a href="{{pathFor "admin-permissions-new"}}" class="button primary new-role">{{_ "New_role"}}</a>
<table border="1" class="permission-grid secondary-background-color">
<thead class="content-background-color">
<tr>
<th class="border-component-color">&nbsp;</th>
{{#each role}}
{{# header sectionName=pageTitle}}
<div class="rc-header__section-button">
<a href="{{pathFor"admin-permissions-new"}}" class="rc-button rc-button--primary new-role">{{_ "New_role"}}</a>
</div>
{{/header}}

<div class="content">
<table border="1" class="permission-grid secondary-background-color">
<thead class="content-background-color">
<tr>
<th class="border-component-color">&nbsp;</th>
{{#each role}}
<th class="border-component-color" title="{{description}}">
<a href="{{pathFor "admin-permissions-edit" name=_id}}">
{{_id}}
<i class="icon-edit"></i>
</a>
</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each permission}}
{{/each}}
</tr>
</thead>
<tbody>
{{#each permission}}
<tr class="admin-table-row">
<td class="permission-name border-component-color" title="{{_ permissionDescription}}">{{_ permissionName}}<br>[{{_id}}]</td>
{{#each role}}
<td class="border-component-color">
<input type="checkbox" name="perm[{{_id}}][{{../_id}}]" class="role-permission" value="1" checked="{{granted ../roles}}" data-role="{{_id}}" data-permission="{{../_id}}">
</td>
<td class="border-component-color">
<input type="checkbox" name="perm[{{_id}}][{{../_id}}]" class="role-permission" value="1" checked="{{granted ../roles}}" data-role="{{_id}}" data-permission="{{../_id}}">
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
{{/each}}
</tbody>
</table>
</div>
{{else}}
{{_ "Not_authorized"}}
<div class="content">
{{#if i18nPageTitle}} {{> header sectionName=i18nPageTitle}} {{else}} {{> header sectionName=pageTitle}} {{/if}}
{{_ "Not_authorized"}}
</div>
{{/if}}
</div>
</section>
</template>
62 changes: 43 additions & 19 deletions packages/rocketchat-custom-sounds/client/admin/adminSounds.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,49 @@
<div class="results">
{{{_ "Showing_results" customsounds.length}}}
</div>
<div class="list">
<table>
<thead>
<tr>
<th width="100%">{{_ "Name"}}</th>
</tr>
</thead>
<tbody>
{{#each customsounds}}
<tr class="sound-info row-link">
<td>{{name}}&nbsp;<i class="icon-play-circled"></i></td>
</tr>
{{/each}}
</tbody>
</table>
{{#if hasMore}}
<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
{{/if}}
</div>
{{#table fixed='true' onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize}}
<thead>
<tr>
<th width="95%">
<div class="table-fake-th">{{_ "Name"}}</div>
</th>
<th width="5%">
<div class="table-fake-th">{{_ "Action"}}</div>
</th>
</tr>
</thead>
<tbody>
{{#each customsounds}}
<tr>
<td width="95%">
<div class="rc-table-wrapper">
<div class="rc-table-info">
<span class="rc-table-title">
{{name}}
</span>
</div>
</div>
</td>
<td width="5%">
<div class="rc-table-wrapper">
{{>icon _id=_id icon="play" block="icon-play-circled"}}
</div>
</td>
</tr>
{{else}}
{{# with searchText}}
<tr class="table-no-click">
<td>{{_ "No_results_found_for"}} {{.}}</td>
</tr>
{{/with}}
{{/each}}
{{#unless isReady}}
<tr class="table-no-click">
<td class="table-loading-td">{{> loading}}</td>
</tr>
{{/unless}}
</tbody>
{{/table}}
{{/requiresPermission}}
</div>
</section>
Expand Down
39 changes: 24 additions & 15 deletions packages/rocketchat-custom-sounds/client/admin/adminSounds.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import { CustomSounds } from 'meteor/rocketchat:models';
import s from 'underscore.string';

Template.adminSounds.helpers({
searchText() {
const instance = Template.instance();
return instance.filter && instance.filter.get();
},
isReady() {
if (Template.instance().ready != null) {
return Template.instance().ready.get();
Expand Down Expand Up @@ -37,6 +41,26 @@ Template.adminSounds.helpers({
data: Template.instance().tabBarData.get(),
};
},

onTableScroll() {
const instance = Template.instance();
return function(currentTarget) {
if (
currentTarget.offsetHeight + currentTarget.scrollTop >=
currentTarget.scrollHeight - 100
) {
return instance.limit.set(instance.limit.get() + 50);
}
};
},
onTableItemClick() {
const instance = Template.instance();
return function(item) {
instance.tabBarData.set(CustomSounds.findOne({ _id: item._id }));
instance.tabBar.showGroup('custom-sounds-selected');
instance.tabBar.open('admin-sound-info');
};
},
});

Template.adminSounds.onCreated(function() {
Expand Down Expand Up @@ -108,26 +132,11 @@ Template.adminSounds.events({
e.preventDefault();
}
},

'keyup #sound-filter'(e, t) {
e.stopPropagation();
e.preventDefault();
t.filter.set(e.currentTarget.value);
},

'click .sound-info'(e, instance) {
e.preventDefault();
instance.tabBarData.set(CustomSounds.findOne({ _id: this._id }));
instance.tabBar.showGroup('custom-sounds-selected');
instance.tabBar.open('admin-sound-info');
},

'click .load-more'(e, t) {
e.preventDefault();
e.stopPropagation();
t.limit.set(t.limit.get() + 50);
},

'click .icon-play-circled'(e) {
e.preventDefault();
e.stopPropagation();
Expand Down
69 changes: 43 additions & 26 deletions packages/rocketchat-emoji-custom/client/admin/adminEmoji.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,33 +22,50 @@
<div class="results">
{{{_ "Showing_results" customemoji.length}}}
</div>
<div class="list">
<table class="secondary-background-color">
<thead>
<tr class="admin-table-row">
<th class="content-background-color border-component-color">&nbsp;</th>
<th class="content-background-color border-component-color" width="51%">{{_ "Name"}}</th>
<th class="content-background-color border-component-color" width="49%">{{_ "Aliases"}}</th>
</tr>
</thead>
<tbody>
{{#each customemoji}}
<tr class="emoji-info row-link admin-table-row">
<td class="border-component-color">
<div class="emojiAdminPreview-image">
{{> emojiPreview name=name extension=extension}}
{{#table fixed='true' onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize}}
<thead>
<tr>
<th width="50%">
<div class="table-fake-th">{{_ "Name"}}</div>
</th>
<th width="50%">
<div class="table-fake-th">{{_ "Aliases"}}</div>
</th>
</tr>
</thead>
<tbody>
{{#each customemoji}}
<tr>
<td width="50%">
<div class="rc-table-wrapper">
<div class="rc-table-info">
<span class="rc-table-title">
{{name}}
</span>
</div>
</td>
<td class="border-component-color">{{name}}</td>
<td class="border-component-color">{{aliases}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{#if hasMore}}
<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
{{/if}}
</div>
</div>
</td>
<td width="50%">
<div class="rc-table-wrapper">
<div class="rc-table-info">
<span class="rc-table-title">
{{aliases}}
</span>
</div>
</div>
</td>
</tr>
{{else}} {{# with searchText}}
<tr class="table-no-click">
<td>{{_ "No_results_found_for"}} {{.}}</td>
</tr>
{{/with}} {{/each}} {{#unless isReady}}
<tr class="table-no-click">
<td class="table-loading-td">{{> loading}}</td>
</tr>
{{/unless}}
</tbody>
{{/table}}
{{/unless}}
</div>
</section>
Expand Down
23 changes: 11 additions & 12 deletions packages/rocketchat-emoji-custom/client/admin/adminEmoji.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import { SideNav } from 'meteor/rocketchat:ui';
import s from 'underscore.string';

Template.adminEmoji.helpers({
searchText() {
const instance = Template.instance();
return instance.filter && instance.filter.get();
},
isReady() {
if (Template.instance().ready != null) {
return Template.instance().ready.get();
Expand Down Expand Up @@ -37,6 +41,13 @@ Template.adminEmoji.helpers({
data: Template.instance().tabBarData.get(),
};
},
onTableItemClick() {
const instance = Template.instance();
return function({ _id }) {
instance.tabBarData.set(RocketChat.models.EmojiCustom.findOne({ _id }));
instance.tabBar.open('admin-emoji-info');
};
},
});

Template.adminEmoji.onCreated(function() {
Expand Down Expand Up @@ -110,16 +121,4 @@ Template.adminEmoji.events({
e.preventDefault();
t.filter.set(e.currentTarget.value);
},

'click .emoji-info'(e, instance) {
e.preventDefault();
instance.tabBarData.set(RocketChat.models.EmojiCustom.findOne({ _id: this._id }));
instance.tabBar.open('admin-emoji-info');
},

'click .load-more'(e, t) {
e.preventDefault();
e.stopPropagation();
t.limit.set(t.limit.get() + 50);
},
});
8 changes: 4 additions & 4 deletions packages/rocketchat-importer/client/admin/adminImport.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template name="adminImport">
<section class="page-container page-home page-static page-settings">
{{> header sectionName="Import"}}
{{> header sectionName="Import" fullpage="true"}}
<div class="content">
{{#unless isAdmin}}
<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
Expand All @@ -12,8 +12,8 @@ <h1>{{_ "Import History" }}</h1>
<div class="section-content">
<div>{{_ "View the status of all import operations." }}</div>
<br/>
<button class="button primary import-history">{{_ "View History"}}</button>
<button class="rc-button rc-button--primary import-history">{{_ "View History"}}</button>

</div>

</div>
Expand All @@ -26,7 +26,7 @@ <h1>{{ name }}</h1>
<div class="section-content">
<div>{{getDescription .}}</div>
<br/>
<button class="button primary start-import">{{_ "Start"}}</button>
<button class="rc-button rc-button--primary start-import">{{_ "Start"}}</button>
</div>
</div>
{{/each}}
Expand Down
4 changes: 2 additions & 2 deletions packages/rocketchat-importer/client/admin/adminImportHistory.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template name="adminImportHistory">
<section class="page-container page-home page-static page-settings">
{{> header sectionName="Recent_Import_History"}}
{{> header sectionName="Recent_Import_History" ullpage="true"}}
<div class="content">
{{#unless isAdmin}}
<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
{{else}}
{{#if isPreparing}}
{{> loading}}
{{else}}
<button class="button primary import-list">{{_ "Back"}}</button>
<button class="rc-button rc-button--primary import-list">{{_ "Back"}}</button>

{{#each history}}
<div class="section">
Expand Down
Loading

0 comments on commit 285d719

Please sign in to comment.