Skip to content

GitLab

Commit 1fd24197 authored by Sandro Lutz's avatar Sandro Lutz Committed by Sandro Lutz
Browse files

Add ActionBar to filtered list pages

parent 74e10e20
Hide whitespace changes
Inline Side-by-side
src/components/ActionBar.js 0 → 100644
View file @ 1fd24197
import m from 'mithril';
import './ActionBar.less';
export default class ActionBarComponent {
/**
* Generic action bar component
*
* @param {string} attrs All other attributes are assigned to the container.
* @param {string} attrs.left Buttons to place on the left side.
* @param {string} attrs.right Buttons to place on the right side.
*
* Example:
* ```javascript
* m(TooltipComponent, {
* left: [m(Button, { label: 'btn left'})],
* right: [m(Button, { label: 'btn right'})],
* })
* ```
*/
static view({ attrs: { left, right, ...attrs } }) {
return m('.pe-actionbar', attrs, m('div', left), m('div', right));
}
}
src/components/ActionBar.less 0 → 100644
View file @ 1fd24197
.pe-actionbar {
width: 100%;
display: flex;
justify-content: space-between;
> div > * {
padding: 6px;
margin: 0;
}
}
src/components/Button.js
View file @ 1fd24197
......@@ -3,7 +3,7 @@ import { Button } from 'polythene-mithril-button';
import { ButtonCSS } from 'polythene-css';
ButtonCSS.addStyle('.blue-button', {
color_light_background: '#5378E1',
color_light_background: '#3f51b5',
color_light_text: 'white',
color_dark_background: '#1f2d54',
color_dark_text: 'white',
......@@ -16,6 +16,17 @@ ButtonCSS.addStyle('.red-button', {
color_dark_text: 'white',
});
ButtonCSS.addStyle('.blue-flat-button', {
color_light_background: 'transparent',
color_light_border: '#3f51b5',
color_light_text: '#3f51b5',
});
ButtonCSS.addStyle('.red-flat-button', {
color_light_background: 'transparent',
color_light_text: '#e8462b',
});
ButtonCSS.addStyle('.flat-button', {
color_light_background: 'transparent',
color_light_text: 'black',
......
src/components/index.js
View file @ 1fd24197
......@@ -9,3 +9,4 @@ export { default as SelectGroupForm } from './form/selectGroup';
export { default as FileInput } from './FileInput';
export { default as EventCard } from './EventCard';
export { default as Select } from './Select';
export { default as ActionBar } from './ActionBar';
src/images/icons.js
View file @ 1fd24197
......@@ -7,9 +7,11 @@ export default {
// Icons provided by our web-ui-components library
...icons,
link:
'<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z" /></svg>',
filterList:
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
link:
externalLink:
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>',
earth:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>',
......
src/languages/de.js
View file @ 1fd24197
......@@ -25,6 +25,7 @@ export default {
search: 'Suchen',
reset: 'Zurücksetzen',
externalLink: 'Externer Link',
copyDirectLink: 'Direktlink kopieren',
button: {
clear: 'löschen',
create: 'erstellen',
......@@ -281,7 +282,7 @@ export default {
// Joboffers Page
joboffers: {
title: 'Jobs',
downloadAsPdf: 'Als PDF herunterladen',
downloadAsPdf: 'PDF herunterladen',
publishedToday: 'heute veröffentlicht',
publishedYesterday: 'gestern veröffentlicht',
publishedDaysAgo: 'vor {{days}} Tagen veröffentlicht',
......
src/languages/en.js
View file @ 1fd24197
......@@ -25,6 +25,7 @@ export default {
search: 'Search',
reset: 'Reset',
externalLink: 'External link',
copyDirectLink: 'Copy link',
button: {
clear: 'clear',
create: 'create',
......@@ -281,7 +282,7 @@ export default {
// Joboffers Page
joboffers: {
title: 'Jobs',
downloadAsPdf: 'Download as PDF',
downloadAsPdf: 'Download PDF',
publishedToday: 'published today',
publishedYesterday: 'published yesterday',
publishedDaysAgo: 'published {{days}} days ago',
......
src/styles/eventDetails.less
View file @ 1fd24197
......@@ -2,8 +2,10 @@
.event-details {
display: grid;
grid-template-areas: 'description separator signup';
grid-template-columns: 1fr 4px 350px;
grid-template-areas:
'signup separator description'
'actions actions actions';
grid-template-columns: 350px 4px 1fr;
border-top: 1px solid @color-grey;
align-items: center;
min-height: 10em;
......@@ -13,10 +15,26 @@
grid-template-areas:
'description'
'separator'
'signup';
'signup'
'actions';
min-height: unset;
}
&.no-signup {
grid-template-areas:
'description'
'actions';
grid-template-columns: 1fr;
.separator {
display: none;
}
.form {
display: none;
}
}
> p {
grid-area: description;
margin: 1em;
......@@ -39,8 +57,7 @@
.form {
grid-area: signup;
position: relative;
margin: 2em 1em;
text-align: center;
margin: 2em 1em .5em;
> p {
position: absolute;
......@@ -65,6 +82,10 @@
}
}
.event-actions {
grid-area: actions;
}
.event-loading {
position: relative;
width: 100%;
......
src/styles/jobofferDetails.less
View file @ 1fd24197
.joboffer-details {
padding: 0 2em 2em;
p { margin: 1em 0; }
a { padding: 0; }
.description {
padding: 0 2em;
}
}
src/styles/jobofferList.less
View file @ 1fd24197
.joboffer-header {
display: grid;
grid-template-areas: 'logo content';
grid-template-columns: 150px 1fr;
grid-template-columns: 138px 1fr;
@media @mobile {
grid-template-areas: 'content';
......@@ -9,8 +9,10 @@
}
.image {
width: unset;
grid-area: logo;
display: block;
margin: 16px;
background-color: transparent;
@media @mobile {
......
src/styles/studydocList.less
View file @ 1fd24197
......@@ -37,7 +37,7 @@
}
.studydoc-header {
padding: 1em;
padding: 1.25em;
.title {
display: block;
......@@ -45,7 +45,6 @@
font-size: 1em;
h3 {
font-size: 1.2em;
margin: 0;
display: inline-block;
......@@ -63,12 +62,12 @@
.properties {
width: 100%;
margin-top: 1em;
margin-top: .25em;
}
.property {
display: inline-block;
padding-bottom: 1em;
padding-bottom: .25em;
@media @mobile {
padding-bottom: .25em;
......@@ -107,72 +106,8 @@
.studydoc-content .studydoc-documents {
display: none;
padding: 16px;
background-color: @color-grey;
@media @mobile, @tablet {
display: block;
}
}
#studydoc-list {
#head-style {
text-align: right;
}
#row-style {
height: 2em;
background-color: #fdfdfd;
border: 1px solid @color-grey;
&:hover {
background-color: #f5f5f5;
}
}
h2 {
display: inline;
text-align: center;
}
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container > div {
padding: 0 5px 5px 0;
text-align: left;
}
div.list-item {
display: grid;
grid-template-columns: auto 25% 15%;
grid-row-gap: .5em;
padding: .5em;
&:first-of-type {
font-weight: bold;
border-bottom: solid 2px #000;
}
#title-style {
margin-top: auto;
margin-bottom: auto;
}
#author-style {
margin-top: auto;
margin-bottom: auto;
}
#course_year-style {
margin-top: auto;
margin-bottom: auto;
text-align: right;
}
}
div.list-style {
background-color: #808080;
}
}
src/utils.js 0 → 100644
View file @ 1fd24197
function copyToClipboard(text, inputElement) {
const input = inputElement;
input.value = text;
input.focus();
input.select();
try {
document.execCommand('copy');
} catch (err) {
console.error('Unable to copy', err);
}
}
export { copyToClipboard };
src/views/events/eventDetails.js
View file @ 1fd24197
......@@ -9,8 +9,10 @@ import { Infobox } from '../errors';
import { log } from '../../models/log';
import { isLoggedIn, login } from '../../models/auth';
import Button from '../../components/Button';
import { i18n, currentLocale } from '../../models/language';
import ActionBar from '../../components/ActionBar';
import { i18n, currentLocale, currentLanguage } from '../../models/language';
import icons from '../../images/icons';
import { copyToClipboard } from '../../utils';
export default class EventDetails {
oninit(vnode) {
......@@ -101,13 +103,20 @@ export default class EventDetails {
}
view() {
let noSignup = false;
let eventSignupForm;
let eventSignupButtons;
const now = new Date();
const registerStart = new Date(this.event.time_register_start);
const registerEnd = new Date(this.event.time_register_end);
if (this.event.time_register_start === null) {
eventSignupForm = m('div', m('p', i18n('events.registration.none')));
eventSignupButtons = m(Button, {
className: 'flat-button',
disabled: true,
label: i18n('events.registration.none'),
});
noSignup = true;
} else if (registerStart <= now) {
if (registerEnd >= now) {
if (isLoggedIn()) {
......@@ -131,19 +140,24 @@ export default class EventDetails {
const signupFormOptions = {
signoffButton: this.event.signupData != null,
hasSignupData: this.event.signupData != null,
canChangeSignup: this.schema != null,
};
eventSignupForm = this._renderSignupForm(signupFormOptions);
eventSignupButtons = this._renderSignupButtons(signupFormOptions);
}
} else if (this.event.allow_email_signup) {
const signupFormOptions = {
emailField: true,
};
eventSignupForm = this._renderSignupForm(signupFormOptions);
eventSignupButtons = this._renderSignupButtons(signupFormOptions);
} else {
eventSignupForm = m('div', [
m('span', `${i18n('events.restrictions.membersOnly')} `),
m(Button, { label: i18n('login'), events: { onclick: () => login(m.route.get()) } }),
]);
eventSignupForm = m('div', [m('span', `${i18n('events.restrictions.membersOnly')} `)]);
eventSignupButtons = m(Button, {
label: i18n('login'),
className: 'blue-flat-button',
events: { onclick: () => login(m.route.get()) },
});
}
this._renderParticipationNotice();
} else {
......@@ -184,38 +198,66 @@ export default class EventDetails {
});
}
return m('div.event-details', [
const urlId = `event-${this.event._id}-url`;
return m('div.event-details', { className: noSignup ? 'no-signup' : null }, [
m('p', m.trust(marked(escape(this.event.getDescription())))),
m('div.separator'),
m('div.form', [notification, eventSignupForm]),
!noSignup && m('div.separator'),
!noSignup && m('div.form', [notification, eventSignupForm]),
m(ActionBar, {
className: 'event-actions',
left: eventSignupButtons,
right: [
m('textarea', {
id: urlId,
style: { opacity: 0, width: 0, height: 0, padding: 0 },
}),
m(Button, {
className: 'flat-button',
label: i18n('copyDirectLink'),
events: {
onclick: () => {
const url = `${window.location.origin}/${currentLanguage()}/events/${
this.event._id
}`;
const inputElement = document.getElementById(urlId);
copyToClipboard(url, inputElement);
},
},
}),
],
}),
]);
}
_renderSignupForm({ hasSignupData = false, emailField = false, signoffButton = false }) {
_renderSignupForm({ emailField = false }) {
const elements = this.schema ? this.form.renderSchema() : [];
if (emailField) {
elements.push(this._renderEmailField());
}
if (!hasSignupData) {
elements.push(this._renderSignupButton(i18n('events.signup.action')));
} else if (this.schema) {
elements.push(this._renderSignupButton(i18n('events.signup.updateAction')));
}
if (signoffButton) {
elements.push(this._renderSignoffButton());
}
return m('form', { onsubmit: () => false }, elements);
}
_renderSignupButtons({ canChangeSignup = false, hasSignupData = false, signoffButton = false }) {
return [
(!hasSignupData || canChangeSignup) &&
this._renderSignupButton(
i18n(`events.signup.${hasSignupData ? 'updateAction' : 'action'}`)
),
signoffButton && this._renderSignoffButton(),
];
}
_renderSignupButton(label) {
// TODO: evaluate email field validity!
// Waiting for MR to be accepted in web-ui-components repository.
return m(Button, {
name: 'signup',
className: 'blue-flat-button',
border: true,
label,
active: this.form.valid && !this.signupBusy,
events: {
......@@ -241,6 +283,7 @@ export default class EventDetails {
_renderSignoffButton() {
return m(Button, {
name: 'signoff',
className: 'blue-flat-button',
label: i18n('events.signoff.action'),
active: !this.signoffBusy,
events: {
......
src/views/footer.js
View file @ 1fd24197
......@@ -48,7 +48,7 @@ export default class Footer {
i18n('footer.issueReport'),
m(Icon, {
class: 'external-link',
svg: { content: m.trust(icons.link) },
svg: { content: m.trust(icons.externalLink) },
size: 'small',
alt: i18n('externalLink'),
}),
......
src/views/header.js
View file @ 1fd24197
......@@ -148,7 +148,7 @@ export default class Header {
subitem.url
? m(Icon, {
class: 'external-link',
svg: { content: m.trust(icons.link) },
svg: { content: m.trust(icons.externalLink) },
size: 'small',
alt: i18n('externalLink'),
})
......
src/views/jobs/jobofferDetails.js
View file @ 1fd24197
......@@ -2,24 +2,50 @@ import m from 'mithril';
import marked from 'marked';
import escape from 'html-escape';
import { apiUrl } from 'config';
import { Button } from 'polythene-mithril-button';
import { i18n } from '../../models/language';
import Button from '../../components/Button';
import ActionBar from '../../components/ActionBar';
import { i18n, currentLanguage } from '../../models/language';
import { copyToClipboard } from '../../utils';
export default class JobofferDetails {
static view({ attrs: { joboffer } }) {
const urlId = `joboffer-${joboffer._id}-url`;
return m('div.joboffer-details', [
m('div.description', m.trust(marked(escape(joboffer.getDescription())))),
joboffer.pdf
? m(Button, {
label: i18n('joboffers.downloadAsPdf'),
border: true,
m(ActionBar, {
right: [
joboffer.pdf
? m(Button, {
className: 'flat-button',
label: i18n('joboffers.downloadAsPdf'),
events: {
onclick: () => {
window.open(apiUrl + joboffer.pdf.file, '_blank');
},
},
})
: null,
m('textarea', {
id: urlId,
style: { opacity: 0, width: 0, height: 0, padding: 0 },
}),
m(Button, {
className: 'flat-button',
label: i18n('copyDirectLink'),
events: {
onclick: () => {
window.open(apiUrl + joboffer.pdf.file, '_blank');
const url = `${window.location.origin}/${currentLanguage()}/${this.name}/${
joboffer._id
}`;
const inputElement = document.getElementById(urlId);
copyToClipboard(url, inputElement);
},
},
})
: null,
}),
],
}),
]);
}
}
src/views/jobs/jobofferList.js
View file @ 1fd24197
......@@ -127,9 +127,9 @@ export default class JobofferList extends FilteredListPage {
},
header: () =>
m('div.joboffer-header', [
m('div.image.ratio-3to2', m('img', { src: imageurl, alt: joboffer.company })),
m('div.image.ratio-4to1', m('img', { src: imageurl, alt: joboffer.company })),
m('div.joboffer-content', [
m('h2.title', joboffer.getTitle()),
m('h3.title', joboffer.getTitle()),
m('div.date', datePhrase),
]),
]),
......
src/views/studydocs/studydocList.js
View file @ 1fd24197
......@@ -4,8 +4,9 @@ import { apiUrl } from 'config';
import filesize from 'filesize';
import ExpansionPanel from 'amiv-web-ui-components/src/expansionPanel';
import { Dialog } from 'polythene-mithril-dialog';
import { Button } from 'polythene-mithril-button';
import { Icon } from 'polythene-mithril-icon';
import Button from '../../components/Button';
import ActionBar from '../../components/ActionBar';
import StudydocsController from '../../models/studydocs';
import { i18n, currentLanguage } from '../../models/language';
import { FilteredListDataStore, FilteredListPage } from '../filteredListPage';
......@@ -13,6 +14,7 @@ import mimeTypeToIcon from '../../images/mimeTypeToIcon';
import StudydocQuickFilter from './studydocQuickFilter';
import { Infobox } from '../errors';
import icons from '../../images/icons';
import { copyToClipboard } from '../../utils';
const controller = new StudydocsController();
const dataStore = new FilteredListDataStore();
......@@ -22,6 +24,8 @@ export default class StudydocList extends FilteredListPage {
super('studydocuments', dataStore);
this.dropdownDisabled = {};
this.directLinkCopied = null;
this.directLinkCopiedTimeout = null;
}
oninit(vnode) {
......@@ -288,24 +292,29 @@ export default class StudydocList extends FilteredListPage {
? studydocument.title
: i18n('studydocs.name.default');
const urlId = `studydoc-${studydocument._id}-url`;
return m(ExpansionPanel, {
id: this.getItemElementId(studydocument._id),
expanded: studydocument._id === selectedId,
separated: true,
duration: animationDuration,
onChange: expanded => {
if (this.expandDisabled === studydocument._id) {
this.expandDisabled = null;
return;
}