Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-22 06:39:43 +02:00
Code Releases Activity

Provide better user list paging UX

Browse source
This commit is contained in:
Harvey Kandola 2018-12-16 12:56:50 +00:00
parent 8a654fcf3d
commit d1bc4a5b4c
9 changed files with 84 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

2
gui/app/components/customize/user-groups.js
View file

@ -24,7 +24,7 @@ export default Component.extend(AuthProvider, ModalMixin, {
searchText: '', searchText: '',
users: null, users: null,
members: null, members: null,
userLimit: 100, userLimit: 25,
didReceiveAttrs() { didReceiveAttrs() {
this._super(...arguments); this._super(...arguments);

11
gui/app/components/customize/user-list.js
View file

@ -25,6 +25,7 @@ export default Component.extend(AuthProvider, ModalMixin, Notifier, {
filter: '', filter: '',
hasSelectedUsers: false, hasSelectedUsers: false,
showDeleteDialog: false, showDeleteDialog: false,
showPermExplain: false,
init() { init() {
this._super(...arguments); this._super(...arguments);
@ -58,6 +59,16 @@ export default Component.extend(AuthProvider, ModalMixin, Notifier, {
}, },
actions: { actions: {
togglePerms() {
this.set('showPermExplain', !this.get('showPermExplain'));
if (this.showPermExplain) {
this.$(".perms").show();
} else {
this.$(".perms").hide();
}
},
toggleSelect(user) { toggleSelect(user) {
user.set('selected', !user.get('selected')); user.set('selected', !user.get('selected'));

5
gui/app/components/ui/ui-toolbar-label.js
View file

@ -22,11 +22,14 @@ export default Component.extend({
color: '', color: '',
label: '', label: '',
tooltip: '', tooltip: '',
selected: false,
calcClass: computed(function() { calcClass: computed('selected', function() {
let c = ''; let c = '';
if (this.color !== '') c += this.color + ' '; if (this.color !== '') c += this.color + ' ';
if (this.selected === true) c += 'label-selected';
return c.trim(); return c.trim();
}), }),

4
gui/app/constants/constants.js
View file

@ -202,6 +202,10 @@ let constants = EmberObject.extend({
ArrowDown: 'dicon-arrow-down-2', ArrowDown: 'dicon-arrow-down-2',
ArrowLeft: 'dicon-arrow-left-2', ArrowLeft: 'dicon-arrow-left-2',
ArrowRight: 'dicon-arrow-right-2', ArrowRight: 'dicon-arrow-right-2',
ArrowSmallUp: 'dicon-small-up',
ArrowSmallDown: 'dicon-small-down',
ArrowSmallLeft: 'dicon-small-left',
ArrowSmallRight: 'dicon-small-right',
Attachment: 'dicon-attachment', Attachment: 'dicon-attachment',
BarChart: 'dicon-chart-bar-2', BarChart: 'dicon-chart-bar-2',
Bookmark: 'dicon-bookmark', Bookmark: 'dicon-bookmark',

2
gui/app/pods/customize/users/controller.js
View file

@ -16,7 +16,7 @@ export default Controller.extend({
userService: service('user'), userService: service('user'),
globalSvc: service('global'), globalSvc: service('global'),
syncInProgress: false, syncInProgress: false,
userLimit: 100, userLimit: 25,
loadUsers(filter) { loadUsers(filter) {
this.get('userService').getComplete(filter, this.get('userLimit')).then((users) => { this.get('userService').getComplete(filter, this.get('userLimit')).then((users) => {

6
gui/app/styles/core/ui/ui-toolbar.scss
View file

@ -4,7 +4,6 @@
.dmz-toolbar { .dmz-toolbar {
display: inline-flex; display: inline-flex;
// flex: 0 1 auto;
flex-basis: auto; flex-basis: auto;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
@ -30,7 +29,6 @@
} }
> .label { > .label {
// display: inline-block;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: map-get($gray-shades, 600); color: map-get($gray-shades, 600);
@ -39,6 +37,10 @@
cursor: pointer; cursor: pointer;
} }
> .label-selected {
color: map-get($yellow-shades, 600);
}
> .red { > .red {
color: map-get($red-shades, 500); color: map-get($red-shades, 500);

11
gui/app/styles/core/view/customize.scss
View file

@ -5,12 +5,22 @@
background-color: map-get($yellow-shades, 100); background-color: map-get($yellow-shades, 100);
border: 1px solid map-get($yellow-shades, 300); border: 1px solid map-get($yellow-shades, 300);
@include border-radius(3px); @include border-radius(3px);
@extend .no-select;
> .title { > .title {
font-weight: 700; font-weight: 700;
font-size: 1.1rem; font-size: 1.1rem;
color: map-get($yellow-shades, 800); color: map-get($yellow-shades, 800);
cursor: pointer;
> i {
font-size: 20px;
vertical-align: sub;
} }
}
.perms {
display: none;
> .perm-name { > .perm-name {
font-size: 1rem; font-size: 1rem;
@ -25,6 +35,7 @@
color: map-get($gray-shades, 800); color: map-get($gray-shades, 800);
} }
} }
}
.user-table { .user-table {
tbody tr td, thead tr th { tbody tr td, thead tr th {

18
gui/app/templates/components/customize/user-groups.hbs
View file

@ -135,15 +135,15 @@
<div class="view-customize"> <div class="view-customize">
<div class="text-center"> <div class="text-center">
{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false tooltip="Maximum users to display"}} {{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false tooltip="Maximum users to display"}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="1" onClick=(action "onLimit" 1)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="5" selected=(eq userLimit 5) onClick=(action "onLimit" 5)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="10" onClick=(action "onLimit" 10)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="10" selected=(eq userLimit 10) onClick=(action "onLimit" 10)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="25" onClick=(action "onLimit" 25)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="25" selected=(eq userLimit 25) onClick=(action "onLimit" 25)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="50" onClick=(action "onLimit" 50)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="50" selected=(eq userLimit 50) onClick=(action "onLimit" 50)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="100" onClick=(action "onLimit" 100)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="100" selected=(eq userLimit 100) onClick=(action "onLimit" 100)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="250" onClick=(action "onLimit" 250)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="250" selected=(eq userLimit 250) onClick=(action "onLimit" 250)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="500" onClick=(action "onLimit" 500)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="500" selected=(eq userLimit 500) onClick=(action "onLimit" 500)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="1,000" onClick=(action "onLimit" 1000)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="1,000" selected=(eq userLimit 1000) onClick=(action "onLimit" 1000)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="ALL" onClick=(action "onLimit" 99999)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="ALL" selected=(eq userLimit 99999) onClick=(action "onLimit" 99999)}}
{{/ui/ui-toolbar}} {{/ui/ui-toolbar}}
</div> </div>
{{ui/ui-spacer size=300}} {{ui/ui-spacer size=300}}

29
gui/app/templates/components/customize/user-list.hbs
View file

@ -19,7 +19,15 @@
{{ui/ui-spacer size=300}} {{ui/ui-spacer size=300}}
<div class="explain-user-perms"> <div class="explain-user-perms">
<div class="title">User Permissions Explained</div> <div class="title" {{action "togglePerms"}}>
Permissions Explained
{{#if showPermExplain}}
<i class="dicon {{constants.Icon.ArrowSmallUp}}" />
{{else}}
<i class="dicon {{constants.Icon.ArrowSmallDown}}" />
{{/if}}
</div>
<div class="perms">
<div class="perm-name">Spaces</div> <div class="perm-name">Spaces</div>
<div class="perm-desc">Can add spaces, both personal and shared with others</div> <div class="perm-desc">Can add spaces, both personal and shared with others</div>
<div class="perm-name">Visible</div> <div class="perm-name">Visible</div>
@ -31,6 +39,7 @@
<div class="perm-name">Active</div> <div class="perm-name">Active</div>
<div class="perm-desc">Can login and use Documize</div> <div class="perm-desc">Can login and use Documize</div>
</div> </div>
</div>
{{ui/ui-spacer size=300}} {{ui/ui-spacer size=300}}
<div class="form-group"> <div class="form-group">
@ -40,15 +49,15 @@
<div class="text-center"> <div class="text-center">
{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false tooltip="Maximum users to display"}} {{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false tooltip="Maximum users to display"}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="1" onClick=(action "onLimit" 1)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="5" selected=(eq userLimit 5) onClick=(action "onLimit" 5)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="10" onClick=(action "onLimit" 10)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="10" selected=(eq userLimit 10) onClick=(action "onLimit" 10)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="25" onClick=(action "onLimit" 25)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="25" selected=(eq userLimit 25) onClick=(action "onLimit" 25)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="50" onClick=(action "onLimit" 50)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="50" selected=(eq userLimit 50) onClick=(action "onLimit" 50)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="100" onClick=(action "onLimit" 100)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="100" selected=(eq userLimit 100) onClick=(action "onLimit" 100)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="250" onClick=(action "onLimit" 250)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="250" selected=(eq userLimit 250) onClick=(action "onLimit" 250)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="500" onClick=(action "onLimit" 500)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="500" selected=(eq userLimit 500) onClick=(action "onLimit" 500)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="1,000" onClick=(action "onLimit" 1000)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="1,000" selected=(eq userLimit 1000) onClick=(action "onLimit" 1000)}}
{{ui/ui-toolbar-label color=constants.Color.Gray label="ALL" onClick=(action "onLimit" 99999)}} {{ui/ui-toolbar-label color=constants.Color.Gray label="ALL" selected=(eq userLimit 99999) onClick=(action "onLimit" 99999)}}
{{/ui/ui-toolbar}} {{/ui/ui-toolbar}}
</div> </div>