Commit 88d868ba authored by Sandro Lutz's avatar Sandro Lutz Committed by Hermann
Browse files

Change groups overview style

parent a389ccb5
import m from 'mithril'; import m from 'mithril';
import { Card } from 'polythene-mithril'; import { Card, Button, ListTile } from 'polythene-mithril';
import { DatalistController } from 'amiv-web-ui-components'; import { DatalistController } from 'amiv-web-ui-components';
import { loadingScreen } from '../layout'; import { loadingScreen } from '../layout';
import { ResourceHandler, getCurrentUser } from '../auth'; import { ResourceHandler, getCurrentUser } from '../auth';
class GroupListItem { class GroupListItem {
view({ attrs: { name, _id, color = '#ffffff' } }) { view({ attrs: { name, _id } }) {
return m('div', { return m(ListTile, {
style: { 'max-width': '500px', margin: '5px' }, title: name,
onclick: () => { hoverable: true,
m.route.set(`/groups/${_id}`); rounded: true,
style: {
width: '250px',
}, },
}, m(Card, { url: {
content: [{ primary: { title: name } }], href: `/groups/${_id}`,
style: { backgroundColor: color }, oncreate: m.route.link,
})); },
});
} }
} }
class GroupListCard {
view({ attrs: { title, groups, onAdd = false } }) {
return m('div.maincontainer', { style: { 'margin-top': '5px' } }, m(Card, {
content: m('div', [
m('div', { style: { display: 'flex', 'align-items': 'center' } }, [
m('div.pe-card__title', title),
onAdd && m(Button, {
style: { 'margin-right': '20px' },
className: 'blue-button',
extraWide: true,
label: 'add',
events: { onclick: () => onAdd() },
}),
]),
m('div', {
style: { display: 'flex', 'flex-wrap': 'wrap', 'margin-bottom': '5px' },
}, groups.map(item => m(GroupListItem, { name: item.name, _id: item._id }))),
]),
}));
}
}
export default class GroupList { export default class GroupList {
constructor() { constructor() {
...@@ -42,43 +67,15 @@ export default class GroupList { ...@@ -42,43 +67,15 @@ export default class GroupList {
if (!this.groups) return m(loadingScreen); if (!this.groups) return m(loadingScreen);
return m('div', [ return m('div', [
this.moderatedGroups.length > 0 && m('div.maincontainer', { // groups moderated by the current user
style: { this.moderatedGroups.length > 0 &&
'margin-top': '5px', m(GroupListCard, { title: 'moderated by you', groups: this.moderatedGroups }),
'border-bottom': '1px solid #aaaaaa', // all groups
'padding-bottom': '20px', m(GroupListCard, {
}, title: 'all groups',
}, [ groups: this.groups,
m('div', { onAdd: () => { m.route.set('/newgroup'); },
style: { }),
'font-size': '20px',
margin: '10px 5px',
},
}, 'moderated by you'),
m('div', {
style: { display: 'flex', 'flex-wrap': 'wrap' },
}, this.moderatedGroups.map(item =>
m(GroupListItem, { ...item }))),
]),
m('div.maincontainer', {
style: { display: 'flex', 'flex-wrap': 'wrap', 'margin-top': '5px' },
}, [
this.moderatedGroups.length > 0 && m('div', {
style: {
'font-size': '20px',
margin: '10px 5px',
},
}, 'all groups'),
m('div', {
style: { display: 'flex', 'flex-wrap': 'wrap' },
}, [
this.groups.map(item => m(GroupListItem, item)),
this.handler.rights.indexOf('POST') > -1 && m('div', {
style: { 'max-width': '500px', margin: '5px' },
onclick: () => { m.route.set('/newgroup'); },
}, m(Card, { content: [{ primary: { title: '+ add' } }] })),
]),
]),
]); ]);
} }
} }
...@@ -172,8 +172,9 @@ export default class TableView { ...@@ -172,8 +172,9 @@ export default class TableView {
// ones in this group will be deselected) // ones in this group will be deselected)
this.filters && m('div', { this.filters && m('div', {
style: { style: {
height: '40px', height: '50px',
'overflow-x': 'auto', 'overflow-x': 'auto',
'overflow-y': 'hidden',
'white-space': 'nowrap', 'white-space': 'nowrap',
padding: '0px 5px', padding: '0px 5px',
}, },
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment