Verified Commit e334395c authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Style studydocument item

parent 7a06caef
......@@ -5633,6 +5633,11 @@
"integrity": "sha1-6VF4TXkJUSfTcTApqwY/QIGMoq4=",
"dev": true
},
"filesize": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-4.0.0.tgz",
"integrity": "sha512-IGrOTisl83FmbpiL5KCpfF7+6CRcmndNaWxwYWcnSqXtoNUhVO+1l8rKK4GVE7A8f4fEDkSocS9X6+eXHkEhGA=="
},
"fill-range": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
......
......@@ -33,7 +33,8 @@
"polythene-css": "^1.3.2",
"polythene-mithril": "^1.3.2",
"animated-scroll-to": "^1.2.2",
"raven-js": "^3.27.0"
"raven-js": "^3.27.0",
"filesize": "^4.0.0"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
......
......@@ -34,6 +34,22 @@ export default {
checkboxMarked:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2,4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z" /></svg>',
// File Types
file:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" /></svg>',
filePdf:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M11.43,10.94C11.2,11.68 10.87,12.47 10.42,13.34C10.22,13.72 10,14.08 9.92,14.38L10.03,14.34V14.34C11.3,13.85 12.5,13.57 13.37,13.41C13.22,13.31 13.08,13.2 12.96,13.09C12.36,12.58 11.84,11.84 11.43,10.94M17.91,14.75C17.74,14.94 17.44,15.05 17,15.05C16.24,15.05 15,14.82 14,14.31C12.28,14.5 11,14.73 9.97,15.06C9.92,15.08 9.86,15.1 9.79,15.13C8.55,17.25 7.63,18.2 6.82,18.2C6.66,18.2 6.5,18.16 6.38,18.09L5.9,17.78L5.87,17.73C5.8,17.55 5.78,17.38 5.82,17.19C5.93,16.66 6.5,15.82 7.7,15.07C7.89,14.93 8.19,14.77 8.59,14.58C8.89,14.06 9.21,13.45 9.55,12.78C10.06,11.75 10.38,10.73 10.63,9.85V9.84C10.26,8.63 10.04,7.9 10.41,6.57C10.5,6.19 10.83,5.8 11.2,5.8H11.44C11.67,5.8 11.89,5.88 12.05,6.04C12.71,6.7 12.4,8.31 12.07,9.64C12.05,9.7 12.04,9.75 12.03,9.78C12.43,10.91 13,11.82 13.63,12.34C13.89,12.54 14.18,12.74 14.5,12.92C14.95,12.87 15.38,12.85 15.79,12.85C17.03,12.85 17.78,13.07 18.07,13.54C18.17,13.7 18.22,13.89 18.19,14.09C18.18,14.34 18.09,14.57 17.91,14.75M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M17.5,14.04C17.4,13.94 17,13.69 15.6,13.69C15.53,13.69 15.46,13.69 15.37,13.79C16.1,14.11 16.81,14.3 17.27,14.3C17.34,14.3 17.4,14.29 17.46,14.28H17.5C17.55,14.26 17.58,14.25 17.59,14.15C17.57,14.12 17.55,14.08 17.5,14.04M8.33,15.5C8.12,15.62 7.95,15.73 7.85,15.81C7.14,16.46 6.69,17.12 6.64,17.5C7.09,17.35 7.68,16.69 8.33,15.5M11.35,8.59L11.4,8.55C11.47,8.23 11.5,7.95 11.56,7.73L11.59,7.57C11.69,7 11.67,6.71 11.5,6.47L11.35,6.42C11.33,6.45 11.3,6.5 11.28,6.54C11.11,6.96 11.12,7.69 11.35,8.59Z" /></svg>',
fileWord:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M15.5,17H14L12,9.5L10,17H8.5L6.1,7H7.8L9.34,14.5L11.3,7H12.7L14.67,14.5L16.2,7H17.9M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" /></svg>',
fileExcel:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M16.2,17H14.2L12,13.2L9.8,17H7.8L11,12L7.8,7H9.8L12,10.8L14.2,7H16.2L13,12M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" /></svg>',
filePowerPoint:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M9.8,13.4H12.3C13.8,13.4 14.46,13.12 15.1,12.58C15.74,12.03 16,11.25 16,10.23C16,9.26 15.75,8.5 15.1,7.88C14.45,7.29 13.83,7 12.3,7H8V17H9.8V13.4M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M9.8,12V8.4H12.1C12.76,8.4 13.27,8.65 13.6,9C13.93,9.35 14.1,9.72 14.1,10.24C14.1,10.8 13.92,11.19 13.6,11.5C13.28,11.81 12.9,12 12.22,12H9.8Z" /></svg>',
fileImage:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" /></svg>',
fileArchive:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M5.12,5L5.93,4H17.93L18.87,5M12,17.5L6.5,12H10V10H14V12H17.5L12,17.5M20.54,5.23L19.15,3.55C18.88,3.21 18.47,3 18,3H6C5.53,3 5.12,3.21 4.84,3.55L3.46,5.23C3.17,5.57 3,6 3,6.5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V6.5C21,6 20.83,5.57 20.54,5.23Z" /></svg>',
// Social Media
facebook:
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" /></svg>',
......
import icons from './icons';
const defaultIcon = icons.file;
const fileTypeToIconMapping = {
'application/pdf': icons.filePdf,
// Word Documents
'application/vnd.oasis.opendocument.text': icons.fileWord,
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': icons.fileWord,
'application/msword': icons.fileWord,
// PowerPoint Documents
'application/vnd.oasis.opendocument.presentation': icons.filePowerPoint,
'application/vnd.openxmlformats-officedocument.presentationml.presentation': icons.filePowerPoint,
'application/vnd.ms-powerpoint': icons.filePowerPoint,
// Excel Document
'application/vnd.oasis.opendocument.spreadsheet': icons.fileExcel,
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': icons.fileExcel,
'application/vnd.ms-excel': icons.fileExcel,
// Archives
'application/x-tar': icons.fileArchive,
'application/octet-stream': icons.fileArchive,
'application/x-bzip': icons.fileArchive,
'application/x-bzip2': icons.fileArchive,
'application/x-rar-compressed': icons.fileArchive,
'application/zip': icons.fileArchive,
'application/x-7z-compressed': icons.fileArchive,
// Images
'image/jpeg': icons.fileImage,
'image/gif': icons.fileImage,
'image/png': icons.fileImage,
'image/svg+xml': icons.fileImage,
};
export default mimeType => fileTypeToIconMapping[mimeType] || defaultIcon;
......@@ -194,6 +194,13 @@ export default {
lectureDocuments: 'Unterrichtsmaterialien',
exercises: 'Übungen',
},
name: {
default: 'Nicht kategorisiert',
'cheat sheets': 'Zusammenfassung',
exams: 'Prüfung',
'lecture documents': 'Unterrichtsmaterialien',
exercises: 'Übungen',
},
semester: 'Semester',
allSemesters: 'Alle Semester',
semester1: '1. Semester',
......
......@@ -194,6 +194,13 @@ export default {
lectureDocuments: 'Lecture Documents',
exercises: 'Exercises',
},
name: {
default: 'Not categorized',
'cheat sheets': 'Summary',
exams: 'Exam',
'lecture documents': 'Lecture Documents',
exercises: 'Exercises',
},
semester: 'Semester',
allSemesters: 'All semesters',
semester1: '1st Semester',
......
......@@ -103,6 +103,9 @@ h1 {
}
.external-link {
margin-left: 4px;
top: -1px;
position: relative;
top: .13em;
width: 1em;
height: 1em;
padding: 0 0 0 .25em;
}
@color-red: #e8462b;
@color-dark-blue: #1f2d54;
@color-dark-grey: #9e9e9e;
@color-grey: #eee;
@color-white: #fff;
......
.studydoc-header {
padding: 1em;
.title {
display: block;
width: 100%;
font-size: 1em;
h2 {
margin: 0;
display: inline-block;
span:before {
display: inline-block;
content: '\2013';
padding: 0 .5em;
}
}
span {
font-weight: normal;
}
}
.properties {
width: 100%;
margin-top: 1em;
}
.property {
display: inline-block;
padding-bottom: 1em;
&:after {
content: '/';
color: @color-red;
margin: 0 1em;
}
.name:after {
content: ':';
padding-right: .5em;
}
&:last-of-type:after {
content: '';
margin: 0;
}
}
.documents {
a {
display: inline-block;
color: #000;
&:not(:last-child) {
margin-right: 1em;
}
}
span {
display: inline-block;
position: relative;
bottom: -2px;
}
span.name {
margin-left: .25em;
}
span.size {
color: @color-dark-grey;
margin-left: 1em;
}
}
}
#studydoc-list {
#head-style {
text-align: right;
......
import m from 'mithril';
import { apiUrl } from 'config';
import { i18n } from '../../models/language';
import Button from '../../components/Button';
export default class StudydocDetails {
oninit(vnode) {
this.controller = vnode.attrs.controller;
}
view() {
const document = this.controller.selectedDocument;
if (!document) {
return m('');
}
return [
m('div.studydoc-details-table', [
m('div.flex-container', [
m('div', m('b', i18n('studydocs.title'))),
m('div', document.title),
]),
m('div.flex-container', [
m('div', m('b', i18n('studydocs.type'))),
m('div', document.type),
]),
m('div.flex-container', [
m('div', m('b', i18n('studydocs.lecture'))),
m('div', document.lecture),
]),
m('div.flex-container', [
m('div', m('b', i18n('studydocs.professor'))),
m('div', document.professor),
]),
m('div.flex-container', [
m('div', m('b', i18n('studydocs.semester'))),
m('div', document.semester),
]),
m('div.flex-container', [
m('div', m('b', i18n('studydocs.author'))),
m('div', document.author),
]),
m('div.flex-container', [
m('div', m('b', i18n('studydocs.department'))),
m('div', document.department),
]),
]),
m(
'div.studydoc-details-table',
document.files.map(item =>
m('div', [
m(
'span.button-details-style',
m(Button, {
label: `Download ${item.name.split('.').pop()}`,
events: {
onclick: () => window.open(`${apiUrl}${item.file}`, '_blank'),
},
})
),
m('span#title-wrap-style', item.name),
])
)
),
];
}
}
import m from 'mithril';
import marked from 'marked';
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 StudydocsController from '../../models/studydocs';
import { i18n, currentLanguage } from '../../models/language';
import { FilteredListDataStore, FilteredListPage } from '../filteredListPage';
import mimeTypeToIcon from '../../images/mimeTypeToIcon';
const controller = new StudydocsController();
const dataStore = new FilteredListDataStore();
......@@ -250,6 +253,34 @@ export default class StudydocList extends FilteredListPage {
_renderItem(studydocument, list, selectedId) {
const animationDuration = 300; // in ms
const properties = [];
if (studydocument.course_year) {
properties.push({ value: studydocument.course_year });
}
if (studydocument.professor) {
properties.push({ value: studydocument.professor });
}
if (studydocument.author) {
properties.push({ name: i18n('studydocs.author'), value: studydocument.author });
}
if (studydocument.type) {
properties.push({ value: i18n(studydocument.type) });
}
const title =
studydocument.type || studydocument.lecture
? `${studydocument.lecture ? studydocument.lecture : ''} ${
studydocument.type ? i18n(`studydocs.name.${studydocument.type}`) : ''
}`
: null;
const studydocTitle = studydocument.title
? studydocument.title
: i18n('studydocs.name.default');
return m(ExpansionPanel, {
id: this.getItemElementId(studydocument._id),
expanded: studydocument._id === selectedId,
......@@ -259,39 +290,54 @@ export default class StudydocList extends FilteredListPage {
this.onChange(studydocument._id, expanded, animationDuration);
},
header: () =>
m('div.studydoc', [
m(
'div',
{
class: 'list-title',
},
[
m('h2', studydocument.title),
m('div', [m('span', document.author), m('span', i18n(document.course_year))]),
]
),
]),
content: () =>
m(
'div',
studydocument.files.map(item =>
m('div', [
m('div.studydoc-header', [
m('div', [
m('div.title', [
m(
'span',
m(Button, {
label: `Download ${item.name.split('.').pop()}`,
events: {
onclick: () => window.open(`${apiUrl}${item.file}`, '_blank'),
},
})
'h2',
title
? [title, studydocument.title && m('span', studydocument.title)]
: studydocTitle
),
m('span', item.name),
])
)
),
]),
m('div.properties', properties.map(item => this.constructor._renderProperty(item))),
m('div.documents', studydocument.files.map(file => this.constructor._renderFile(file))),
]),
]),
});
}
static _renderProperty({ name = null, value, visible = true }) {
if (!visible) return null;
return m('div.property', [name ? m('span.name', name) : undefined, m('span', value)]);
}
static _renderFile({ file, name, content_type, length }) {
let label;
if (name.length <= 18) {
label = name;
} else {
label = `${name.substr(0, 10)}\u2026${name.substr(name.length - 8)}`;
}
return m(
'a',
{
href: `${apiUrl}${file}`,
target: '_blank',
onclick: e => {
e.stopPropagation();
},
},
[
m(Icon, { svg: { content: m.trust(mimeTypeToIcon(content_type)) } }),
m('span.name', label),
m('span.size', filesize(length)),
]
);
}
// eslint-disable-next-line class-methods-use-this
async _loadNextPage() {
const newPage = controller.lastLoadedPage + 1;
......
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