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 { Card } from 'polythene-mithril';
import { Card, Button, ListTile } from 'polythene-mithril';
import { DatalistController } from 'amiv-web-ui-components';
import { loadingScreen } from '../layout';
import { ResourceHandler, getCurrentUser } from '../auth';
class GroupListItem {
view({ attrs: { name, _id, color = '#ffffff' } }) {
return m('div', {
style: { 'max-width': '500px', margin: '5px' },
onclick: () => {
m.route.set(`/groups/${_id}`);
view({ attrs: { name, _id } }) {
return m(ListTile, {
title: name,
hoverable: true,
rounded: true,
style: {
width: '250px',
},
}, m(Card, {
content: [{ primary: { title: name } }],
style: { backgroundColor: color },
}));
url: {
href: `/groups/${_id}`,
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 {
constructor() {
......@@ -42,43 +67,15 @@ export default class GroupList {
if (!this.groups) return m(loadingScreen);
return m('div', [
this.moderatedGroups.length > 0 && m('div.maincontainer', {
style: {
'margin-top': '5px',
'border-bottom': '1px solid #aaaaaa',
'padding-bottom': '20px',
},
}, [
m('div', {
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' } }] })),
]),
]),
// groups moderated by the current user
this.moderatedGroups.length > 0 &&
m(GroupListCard, { title: 'moderated by you', groups: this.moderatedGroups }),
// all groups
m(GroupListCard, {
title: 'all groups',
groups: this.groups,
onAdd: () => { m.route.set('/newgroup'); },
}),
]);
}
}
......@@ -172,8 +172,9 @@ export default class TableView {
// ones in this group will be deselected)
this.filters && m('div', {
style: {
height: '40px',
height: '50px',
'overflow-x': 'auto',
'overflow-y': 'hidden',
'white-space': 'nowrap',
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