Commit 50102d42 authored by Sandro Lutz's avatar Sandro Lutz Committed by lic
Browse files

Styling of basic components

parent 4cbbfabd
......@@ -3,13 +3,22 @@ import { Button } from 'polythene-mithril';
import { ButtonCSS } from 'polythene-css';
ButtonCSS.addStyle('.blue-button', {
color_light_background: 'blue',
color_light_background: '#5378E1',
color_light_text: 'white',
color_dark_background: '#1f2d54',
color_dark_text: 'white',
});
ButtonCSS.addStyle('.red-button', {
color_light_background: '#e8462b',
color_light_text: 'white',
color_dark_background: '#e8462b',
color_dark_text: 'white',
});
ButtonCSS.addStyle('.flat-button', {
color_light_background: 'white',
color_light_text: 'gray',
color_light_text: 'black',
});
/**
......@@ -19,6 +28,7 @@ ButtonCSS.addStyle('.flat-button', {
*
* - `className` defaulting to `blue-button`
* - `element` HTML tag; defaulting to `button`
* - `tone` either `light` or `dark`; defaulting to `light`
* - `active` enables/disables the component; defaulting to `true`
* - `label` text shown on the button; defaulting to `Unnamed button`
* - `onclick` *optional*
......@@ -37,6 +47,7 @@ export default class ButtonComponent {
element: 'button',
disabled: vnode.attrs.active === false,
label: 'Unnamed button',
tone: 'light',
};
}
......
import m from 'mithril';
import './Dropdown.less';
/**
* Generic Dropdown component
......@@ -14,7 +15,7 @@ import m from 'mithril';
* m(DropdownComponent, {
* data: [
* { label: 'Label 1', value: 'value1' },
* { label: 'Label 2', value: 'value2' },
* { label: 'Label 2', value: 'value2', disabled: true },
* ],
* selected: this.values[field.key],
* onchange: event => {
......@@ -31,17 +32,26 @@ export default class DropdownComponent {
view(vnode) {
return m(
'select',
'select.dropdown',
{ onchange: m.withAttr('value', this.selectedId), ...this.defaultProps, ...vnode.attrs },
[
vnode.attrs.data.map(item =>
m(
'option',
{ value: item.value, selected: vnode.attrs.selected === item.value },
item.label
)
),
]
// vnode.attrs.placeholder
// ? m(
// 'option',
// { value: '', selected: !vnode.attrs.selected, },
// vnode.attrs.placeholder
// )
// : null,
vnode.attrs.data.map(item =>
m(
'option',
{
value: item.value,
selected: vnode.attrs.selected === item.value,
disabled: item.disabled ? 'disabled' : null,
},
item.label
)
)
);
}
}
.dropdown {
outline: none;
background-color: #fff;
border: 2px solid #ddd;
border-radius: 2px;
padding: 11px;
margin: 0;
}
.dropdown[disabled] {
background-color: #eee;
}
import m from 'mithril';
import { Tabs } from 'polythene-mithril';
import { TabsCSS } from 'polythene-css';
TabsCSS.addStyle('.themed-tabs', {
tab_max_width: 110,
tab_min_width: 110,
color_light: '#444',
color_light_selected: '#ff1744',
color_light_tab_indicator: '#ff1744',
color_dark: '#ccc',
color_dark_selected: '#c51162',
color_dark_tab_indicator: '#c51162',
});
/**
* Generic Tab component
......@@ -41,7 +29,6 @@ TabsCSS.addStyle('.themed-tabs', {
export default class TabComponent {
constructor() {
this.defaultProps = {
className: 'themed-tabs',
activeSelected: true,
};
}
......
import m from 'mithril';
import { TextField } from 'polythene-mithril';
import { TextFieldCSS } from 'polythene-css';
TextFieldCSS.addStyle('.my-TextField', {});
/**
* Generic TextField component
......@@ -35,7 +32,6 @@ TextFieldCSS.addStyle('.my-TextField', {});
export default class TextFieldComponent {
constructor() {
this.defaultProps = {
className: 'my-TextField',
label: 'Unnamed TextField',
};
}
......
......@@ -44,14 +44,6 @@ export default class EventList extends FilteredListPage {
type: 'button',
label: i18n('search'),
},
{
type: 'button',
label: i18n('reset'),
className: 'flat-button',
events: {
onclick: 'reset',
},
},
{
type: 'checkbox',
key: 'price',
......@@ -72,6 +64,14 @@ export default class EventList extends FilteredListPage {
{ label: i18n('events.open_for_amiv_members_only'), value: 'members_only' },
],
},
{
type: 'button',
label: i18n('reset'),
className: 'red-button',
events: {
onclick: 'reset',
},
},
],
onchange: values => {
const query = {};
......
......@@ -39,6 +39,7 @@ export default class Header {
m(
'div.language-switcher',
m(Button, {
className: 'red-button',
label: i18n('language_button'),
events: { onclick: () => switchLanguage() },
})
......
......@@ -51,7 +51,7 @@ export default class JobofferList extends FilteredListPage {
{
type: 'button',
label: i18n('reset'),
className: 'flat-button',
className: 'red-button',
events: {
onclick: 'reset',
},
......
......@@ -84,14 +84,6 @@ export default class StudydocList extends FilteredListPage {
onclick: 'search',
},
},
{
type: 'button',
label: i18n('reset'),
className: 'flat-button',
events: {
onclick: 'reset',
},
},
{
type: 'checkbox',
key: 'department',
......@@ -131,6 +123,14 @@ export default class StudydocList extends FilteredListPage {
{ value: 'exercises', label: i18n('exercises') },
],
},
{
type: 'button',
label: i18n('reset'),
className: 'red-button',
events: {
onclick: 'reset',
},
},
{
type: 'button',
label: i18n('studydocs.upload'),
......
// eslint-disable-next-line import/no-extraneous-dependencies
import { vars as defaultVars } from 'polythene-style';
export const vars = Object.assign({}, defaultVars, {
color_primary: '83, 120, 225', // new base color: #5378e1
});
......@@ -145,6 +145,7 @@ const config = {
resolve: {
alias: {
config: `${__dirname}/config.js`,
'polythene-theme': `${__dirname}/theme.js`, // when config is in the project root
},
},
......
Supports Markdown
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