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

Extend the content block menu

This commit is contained in:
Ramon Wenger 2018-09-19 14:13:57 +02:00
parent a760949b84
commit 8067ca439d
3 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/ContentBlock.vue
View File

@ -1,11 +1,16 @@
<template> <template>
<div class="content-block__container"> <div class="content-block__container">
<div class="content-block" :class="specialClass"> <div class="content-block" :class="specialClass">
<div class="content-block__visibility"> <div class="content-block__actions">
<a @click="toggleVisibility()" class="content-block__visibility-button"> <a @click="toggleVisibility()" class="content-block__visibility-button">
<eye-icon class="content-block__visibility-icon"></eye-icon> <eye-icon class="content-block__action-icon"></eye-icon>
</a> </a>
<visibility-popover :show="showVisibility" :content-block="contentBlock"></visibility-popover> <visibility-popover
:show="showVisibility"
:content-block="contentBlock"
class="content-block__visibility-menu"
></visibility-popover>
<a><pen-icon class="content-block__action-icon"></pen-icon></a>
</div> </div>
<h4 class="content-block__title">{{contentBlock.title}}</h4> <h4 class="content-block__title">{{contentBlock.title}}</h4>
@ -36,6 +41,7 @@
import AddContentBlockButton from '@/components/AddContentBlockButton'; import AddContentBlockButton from '@/components/AddContentBlockButton';
import VisibilityPopover from '@/components/VisibilityPopover'; import VisibilityPopover from '@/components/VisibilityPopover';
import EyeIcon from '@/components/icons/EyeIcon'; import EyeIcon from '@/components/icons/EyeIcon';
import PenIcon from '@/components/icons/PenIcon';
export default { export default {
props: ['contentBlock'], props: ['contentBlock'],
@ -51,7 +57,8 @@
Task, Task,
AddContentBlockButton, AddContentBlockButton,
VisibilityPopover, VisibilityPopover,
EyeIcon EyeIcon,
PenIcon
}, },
computed: { computed: {
@ -85,23 +92,25 @@
line-height: 1.5; line-height: 1.5;
} }
&__visibility { &__actions {
position: absolute; position: absolute;
left: -70px; left: -70px;
top: -4px; top: -4px;
display: grid;
} }
&__visibility-button { &__visibility-button {
cursor: pointer; cursor: pointer;
} }
&__visibility-icon { &__action-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
fill: $color-grey; fill: $color-grey;
} }
&__visibility-menu { &__visibility-menu {
top: 40px;
} }
&--yellow { &--yellow {

2
client/src/components/VisibilityPopover.vue
View File

@ -53,7 +53,7 @@
} }
}) })
} }
}, }
// refetchQueries: [{ // refetchQueries: [{
// query: MODULE_DETAILS_QUERY, // query: MODULE_DETAILS_QUERY,
// variables: { // variables: {

6
client/src/components/icons/PenIcon.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path
d="M39,85.69l.12.12L86.83,38.12a7.42,7.42,0,0,0,0-10.49L72.38,13.17a7.42,7.42,0,0,0-10.49,0L14.19,60.87l.12.12L11,89ZM65.86,17.15a1.8,1.8,0,0,1,2.54,0L82.85,31.6a1.8,1.8,0,0,1,0,2.54l-3.69,3.69-17-17ZM58.2,24.81l17,17L39.13,77.86l-17-17ZM19.38,66.05,33.95,80.62l-16.53,2Z"/>
</svg>
</template>