ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add new bookmark component and some icons

This commit is contained in:
Ramon Wenger 2019-10-08 18:37:16 +02:00
parent 5fd81a2bd6
commit 2656829d86
5 changed files with 140 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/content-blocks/ContentComponent.vue
View File

@ -1,10 +1,6 @@
<template>
<div class="content-component" :class="{'content-component--bookmarked': bookmarked}">
{{component.id}}
<a @click="bookmarkContent(component.id, !bookmarked)">Bookmark</a>
<div>
Bookmarked: {{bookmarked}}
</div>
<bookmark-actions @bookmark="bookmarkContent(component.id, !bookmarked)" :bookmarked="bookmarked"></bookmark-actions>
<component
:is="component.type"
v-bind="component">
@ -28,6 +24,7 @@
import Assignment from '@/components/content-blocks/assignment/Assignment';
import Survey from '@/components/content-blocks/SurveyBlock';
import Solution from '@/components/content-blocks/Solution';
import BookmarkActions from '@/components/notes/BookmarkActions';
import UPDATE_CONTENT_BOOKMARK from '@/graphql/gql/mutations/updateContentBookmark.gql';
import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
@ -52,6 +49,7 @@
Survey,
Solution,
Assignment,
BookmarkActions
},
computed: {
@ -84,9 +82,12 @@
</script>
<style lang="scss" scoped>
@import "@/styles/_variables.scss";
.content-component {
position: relative;
&--bookmarked {
background-color: yellow;
}
}
</style>

16
client/src/components/icons/AddNoteIcon.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<svg class="add-note-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path
d="M81.5,88.39746H18.7627a2.49981,2.49981,0,0,1-2.5-2.5V35.35352L1.72559,20.71191A2.50054,2.50054,0,0,1,3.5,16.4502h78a2.49981,2.49981,0,0,1,2.5,2.5V85.89746A2.49981,2.49981,0,0,1,81.5,88.39746Zm-60.2373-5H79V21.4502H9.50488L20.53711,32.56152a2.5013,2.5013,0,0,1,.72559,1.76172Z"/>
<path d="M64.9209,55.08447H36.18457a2.5,2.5,0,0,1,0-5H64.9209a2.5,2.5,0,0,1,0,5Z"/>
<path d="M48.26318,66.95313V38.21582a2.5,2.5,0,0,1,5,0v28.7373a2.5,2.5,0,0,1-5,0Z"/>
</svg>
</template>
<style scoped lang="scss">
.add-note-icon {
width: 29px;
height: 25px;
margin-left: -2px;
}
</style>

38
client/src/components/icons/BookmarkIcon.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="bookmark-icon">
<g :class="{'bookmark-icon--bookmarked': bookmarked}">
<path class="bookmark-icon__background"
d="M51,67.32872a5.06849,5.06849,0,0,1,2.98875.97385L84,90V11H18V90L48.01333,68.30149A5.064,5.064,0,0,1,51,67.32872Z"
/>
<path id="bookmark-icon__outline"
d="M84.5,93.07715a2.49662,2.49662,0,0,1-1.43359-.45215L51,70.17871,18.93359,92.625A2.49964,2.49964,0,0,1,15,90.57715V11.42285a2.49981,2.49981,0,0,1,2.5-2.5h67a2.49981,2.49981,0,0,1,2.5,2.5v79.1543a2.49947,2.49947,0,0,1-2.5,2.5ZM51,65.15527a4.8673,4.8673,0,0,1,2.80762.88574L82,85.77539V13.92285H20V85.77539L48.19434,66.04A4.863,4.863,0,0,1,51,65.15527Z"/>
</g>
</svg>
</template>
<script>
export default {
props: ['bookmarked']
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.bookmark-icon {
width: 24px;
height: 28px;
&__background {
fill: white;
}
$parent: &;
&--bookmarked {
#{$parent}__background {
fill: $color-accent-1;
}
}
}
</style>

17
client/src/components/icons/NoteIcon.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<svg class="note-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path
d="M81.5,88.39746H18.7627a2.49981,2.49981,0,0,1-2.5-2.5V35.35352L1.72559,20.71191A2.50054,2.50054,0,0,1,3.5,16.4502h78a2.49981,2.49981,0,0,1,2.5,2.5V85.89746A2.49981,2.49981,0,0,1,81.5,88.39746Zm-60.2373-5H79V21.4502H9.50488L20.53711,32.56152a2.5013,2.5013,0,0,1,.72559,1.76172Z"/>
<path d="M61.9209,40.92676H39.18457a2.5,2.5,0,0,1,0-5H61.9209a2.5,2.5,0,0,1,0,5Z"/>
<path d="M62.13184,55.24219H39.39453a2.5,2.5,0,0,1,0-5h22.7373a2.5,2.5,0,0,1,0,5Z"/>
<path d="M62.13184,69.55859H39.39453a2.5,2.5,0,0,1,0-5h22.7373a2.5,2.5,0,0,1,0,5Z"/>
</svg>
</template>
<style scoped lang="scss">
.note-icon {
width: 29px;
height: 25px;
margin-left: -2px;
}
</style>

62
client/src/components/notes/BookmarkActions.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div class="bookmark-actions">
<a class="bookmark-actions__action" @click="$emit('bookmark')"
:class="{'bookmark-actions__action--bookmarked': bookmarked}">
<bookmark-icon :bookmarked="bookmarked"></bookmark-icon>
</a>
<a class="bookmark-actions__action">
<add-note-icon></add-note-icon>
<note-icon v-if="false"></note-icon>
</a>
</div>
</template>
<script>
import BookmarkIcon from '@/components/icons/BookmarkIcon';
import AddNoteIcon from '@/components/icons/AddNoteIcon';
import NoteIcon from '@/components/icons/NoteIcon';
export default {
props: ['bookmarked'],
components: {
BookmarkIcon,
AddNoteIcon,
NoteIcon
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.bookmark-actions {
height: 100%;
min-height: 60px;
padding: 0 2*$large-spacing;
position: absolute;
right: -5*$large-spacing;
display: flex;
flex-direction: column;
&__action {
opacity: 0;
transition: opacity 0.3s;
&--bookmarked {
opacity: 1;
}
}
$parent: &;
&:hover {
#{$parent}__action {
opacity: 1;
}
}
}
</style>