Skip to content
Snippets Groups Projects
Commit 3a88a638 authored by Ron Lucke's avatar Ron Lucke Committed by David Siegfried
Browse files

TIC #3388 

Closes #3388

Merge request studip/studip!2340
parent 443aefb2
Branches
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
package.json
+ 1
− 0
View file @ 3a88a638
...@@ -112,6 +112,7 @@ ...@@ -112,6 +112,7 @@
"md5": "^2.3.0", "md5": "^2.3.0",
"mini-css-extract-plugin": "1.3.1", "mini-css-extract-plugin": "1.3.1",
"mitt": "2.1.0", "mitt": "2.1.0",
"mp3tag.js": "3.7.1",
"multiselect": "0.9.12", "multiselect": "0.9.12",
"pdfjs-dist": "^2.6.347", "pdfjs-dist": "^2.6.347",
"portal-vue": "^2.1.7", "portal-vue": "^2.1.7",
......
resources/assets/stylesheets/scss/courseware/blocks/audio.scss
+ 163
− 189
View file @ 3a88a638
@use '../../../mixins.scss' as *;
$media-buttons: (
play: play,
stop: stop,
pause: pause,
prev: arr_eol-left,
next: arr_eol-right
);
.cw-block-audio { .cw-block-audio {
.cw-audio-container { .cw-audio-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
border: solid thin var(--content-color-40); border: solid thin var(--content-color-40);
padding-top: 1em; padding: 36px;
} gap: 64px;
.cw-audio-controls {
text-align: right;
padding: 0 0.5em;
}
.cw-audio-range {
margin: 0 5px 10px 0;
&::-moz-focus-outer {
border: 0;
}
&.ui-widget-content {
background-color: var(--base-color);
}
.ui-widget-header {
background-color: var(--dark-gray-color-5);
}
.ui-slider-handle {
border-radius: 20px;
width: 1em;
height: 1.7em;
top: -0.5em;
background-color: var(--dark-gray-color-20);
border-color: var(--content-color-40);
cursor: pointer;
margin-left: -2px;
}
} }
.cw-audio-button {
border: solid thin var(--content-color-40);
background-color: var(--white);
background-repeat: no-repeat;
background-position: center center;
background-size: 24px;
min-height: 27px;
line-height: 130%;
padding: 5px 15px 5px 30px;
cursor: pointer;
font-size: 14px;
box-sizing: border-box;
text-align: center;
text-decoration: none;
vertical-align: bottom;
white-space: nowrap;
min-width: unset;
margin: 5px;
height: 46px;
width: 46px;
display: inline-block;
&:hover {
background-color: var(--base-color);
}
@each $button, $icon in $media-buttons { .cw-audio-recorder,
&.cw-audio-#{$button}button { .cw-audio-player {
@include background-icon($icon, clickable, 24); display: flex;
&:hover { flex-direction: row;
@include background-icon($icon, info-alt, 24); flex-wrap: wrap;
} gap: 36px;
} flex-grow: 100;
&.with-playlist {
flex-direction: column;
} }
}
.cw-audio-time { .cw-audio-cover {
position: relative; margin: 0 auto;
top: -1em; display: flex;
color: var(--base-gray); flex-direction: row;
}
.cw-audio-range { &.with-edit-button {
display: block; position: relative;
margin: 0 auto 1.5em; right: -8px;
-webkit-appearance: none; }
position: relative;
overflow: hidden;
height: 18px;
width: 100%;
cursor: pointer;
border-radius: 0;
}
.cw-audio-range::-webkit-slider-runnable-track { .cover {
background: var(--dark-gray-color-20); width: 256px;
} height: 256px;
object-fit: cover;
}
.cw-audio-range::-webkit-slider-thumb { .default-cover {
-webkit-appearance: none; padding: 64px;
width: 9px; /* 1 */ border: solid thin var(--content-color-40);
height: 18px; }
background: var(--white);
box-shadow: -100vw 0 0 100vw var(--base-color);
border: solid thin var(--content-color-40);
}
.cw-audio-range::-moz-range-track { &.loading {
height: 18px; img {
background: var(--dark-gray-color-10); visibility: hidden;
} }
}
.cw-audio-range::-moz-range-thumb { button {
background: var(--white); width: 16px;
height: 18px; height: 16px;
width: 9px; cursor: pointer;
border: solid thin var(--content-color-40); padding: 0 8px;
border-radius: 0 !important; background-color: transparent;
box-shadow: -100vw 0 0 100vw var(--base-color); border: none;
box-sizing: border-box; }
} }
.cw-audio-range::-ms-fill-lower { .cw-audio-controls-wrapper {
background: var(--base-color); flex-grow: 1;
} min-width: 256px;
text-align: center;
display: flex;
flex-direction: column;
.cw-audio-current-track {
flex-grow: 1;
max-width: 270px;
min-height: 60px;
margin: 0 auto;
h2,
h3 {
margin-top: 0;
}
}
.cw-audio-range::-ms-thumb { .cw-audio-controls {
background: var(--white); .cw-audio-progress {
border: solid thin var(--content-color-40); .cw-audio-range {
height: 18px; width: 100%;
width: 9px; -webkit-appearance: none;
box-sizing: border-box; appearance: none;
} cursor: pointer;
outline: none;
height: 2px;
background: var(--content-color-40);
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 16px;
width: 16px;
background-color: var(--base-color);
border-radius: 50%;
border: none;
}
.cw-audio-range::-ms-ticks-after { &::-moz-range-thumb {
display: none; height: 16px;
} width: 16px;
background-color: var(--base-color);
border-radius: 50%;
border: none;
}
}
.cw-audio-range::-ms-ticks-before { .cw-audio-time {
display: none; display: flex;
} flex-direction: row;
justify-content: space-between;
}
}
.cw-audio-range::-ms-track { .cw-recorder-visualization {
background: var(--dark-gray-color-20); display: flex;
color: transparent; flex-direction: row;
height: 18px; align-items: flex-end;
border: none; gap: 2px;
height: 28px;
margin-bottom: 1em;
padding-bottom: 4px;
border-bottom: solid 2px var(--content-color-40);
.cw-recorder-visualization-bar {
min-height: 4px;
width: calc(100% / 32);
background-color: var(--base-color);
&.idle-bar {
height: 4px !important;
}
}
}
.cw-audio-buttons {
display: flex;
flex-direction: row;
justify-content: space-evenly;
button {
cursor: pointer;
border: none;
background: transparent;
}
}
}
}
} }
.cw-audio-range::-ms-tooltip {
display: none;
}
.cw-audio-playlist-wrapper { .cw-audio-playlist-wrapper {
margin-top: -1em; flex-grow: 1;
padding-top: 1em; min-width: 270px;
border: solid thin var(--content-color-40); max-height: 450px;
border-top: none; overflow-y: auto;
&.empty {
border: none;
}
.cw-audio-playlist { .cw-audio-playlist {
padding-left: 0; padding-left: 0;
margin-top: -1em;
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
&.with-recorder {
border-bottom: solid thin var(--content-color-40);
}
li { li {
margin: 0 1em;
&:not(:last-child) { &:not(:last-child) {
border-bottom: solid thin var(--dark-gray-color-30); border-bottom: solid thin var(--dark-gray-color-30);
} }
.cw-playlist-item { .cw-playlist-item {
display: block; display: block;
@include background-icon(file-audio2, clickable, 24); padding: 1em 0;
background-repeat: no-repeat; margin: 0;
background-position: 1em center; img {
vertical-align: middle;
margin: 1em 0;
padding: 1em;
padding-left: 4em;
color: var(--base-color);
&:hover {
color: var(--active-color);
}
&.current-item {
@include background-icon(play, clickable, 24);
font-weight: 700;
&.is-playing {
@include background-icon(pause, clickable, 24);
}
} }
} }
} }
} }
.cw-audio-playlist-recorder {
padding: 1em;
}
} }
}
.cw-audio-current-track { .edit-mp3-cover-wrapper {
@include background-icon(file-audio2, info, 96); display: flex;
background-position: top center; flex-direction: row;
background-repeat: no-repeat; margin-bottom: 1em;
width: 100%;
min-height: 140px; .edit-mp3-cover {
margin: 1em 0 2em 0; width: 128px;
p { height: 128px;
text-align: center; object-fit: cover;
padding-top: 106px;
&.default-cover {
padding: 32px;
border: solid thin var(--content-color-40);
} }
} }
.cw-audio-empty {
@include background-icon(file, info, 96); .remove-cover {
border: solid thin var(--content-color-40); background-color: transparent;
background-position: center 1em; border: none;
background-repeat: no-repeat; height: 16px;
min-height: 140px; width: 16px;
padding: 1em; padding: 0 8px;
p { cursor: pointer;
text-align: center;
padding-top: 106px;
}
} }
} }
resources/assets/stylesheets/scss/courseware/blocks/default-block.scss
+ 19
− 0
View file @ 3a88a638
...@@ -131,4 +131,23 @@ ...@@ -131,4 +131,23 @@
text-align: center; text-align: center;
padding-top: 106px; padding-top: 106px;
} }
}
.cw-call-to-action {
border: solid thin var(--content-color-40);
border-top: none;
button {
width: 100%;
background-color: var(--activity-color-20);
border: none;
text-align: left;
padding: 1em;
cursor: pointer;
img {
margin: 0 1em;
vertical-align: middle;
}
}
} }
\ No newline at end of file
resources/vue/store/courseware/courseware.module.js
+ 17
− 0
View file @ 3a88a638
...@@ -360,6 +360,23 @@ export const actions = { ...@@ -360,6 +360,23 @@ export const actions = {
return response ? response.data.data : response; return response ? response.data.data : response;
}, },
async updateFileContent(context, { file, filedata }) {
const url = `file-refs/${file.id}/content`;
const formData = new FormData();
formData.append('file', filedata, file.attributes.name);
let request = await state.httpClient.post(url, formData);
let response = null;
try {
response = await state.httpClient.get(request.headers.location);
}
catch(e) {
console.debug(e);
response = null;
}
return response ? response.data.data : response;
},
async createRootFolder({ dispatch, rootGetters }, { context, folder }) { async createRootFolder({ dispatch, rootGetters }, { context, folder }) {
// get root folder for this context // get root folder for this context
await dispatch( await dispatch(
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment