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

Add icon to add class link

This commit is contained in:
Ramon Wenger 2020-03-30 16:23:14 +02:00
parent bef33cea09
commit b94bda6c15
4 changed files with 79 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
client/src/components/WidgetPopover.vue
View File

@ -18,59 +18,5 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.widget-popover {
position: absolute;
right: 0;
display: flex;
flex-direction: column;
background-color: $color-white;
padding: 0;
z-index: 100;
@include widget-shadow;
&--mobile {
left: 0;
right: inherit;
}
}
.popover-links {
list-style: none;
display: grid;
&__link {
cursor: pointer;
padding: 0 $medium-spacing;
& > a {
display: inline-block;
color: $color-silver-dark;
font-family: $sans-serif-font-family;
font-size: toRem(14px);
line-height: 1.5;
padding: 5px 0;
cursor: pointer;
}
&--large {
line-height: 40px;
padding: $small-spacing $medium-spacing;
& > a, & {
@include small-text;
}
}
&--emph {
@include regular-text;
font-weight: 600;
}
}
&__divider {
border-top: 1px solid $color-silver-dark;
}
}
</style> </style>

16
client/src/components/school-class/ClassSelectionWidget.vue
View File

@ -20,11 +20,14 @@
<li class="popover-links__link popover-links__link--large popover-links__divider" <li class="popover-links__link popover-links__link--large popover-links__divider"
v-if="me.isTeacher" v-if="me.isTeacher"
data-cy="create-class-link" @click="closeSidebar"> data-cy="create-class-link" @click="closeSidebar">
<router-link tag="span" :to="{name: 'create-class'}">Klasse erfassen</router-link> <router-link tag="span" class="popover-links__link-with-icon" :to="{name: 'create-class'}">
<add-icon class="popover-links__icon"/>
<span>Klasse erfassen</span>
</router-link>
</li> </li>
<!-- <li class="popover-links__link popover-links__link&#45;&#45;large popover-links__divider" @click="closeSidebar">--> <!-- <li class="popover-links__link popover-links__link&#45;&#45;large popover-links__divider" @click="closeSidebar">-->
<!-- <router-link tag="span" :to="{name: 'old-classes'}">Alte Klassen anzeigen</router-link>--> <!-- <router-link tag="span" :to="{name: 'old-classes'}">Alte Klassen anzeigen</router-link>-->
<!-- </li>--> <!-- </li>-->
</widget-popover> </widget-popover>
</div> </div>
</template> </template>
@ -33,6 +36,7 @@
import WidgetPopover from '@/components/WidgetPopover'; import WidgetPopover from '@/components/WidgetPopover';
import ChevronDown from '@/components/icons/ChevronDown'; import ChevronDown from '@/components/icons/ChevronDown';
import CurrentClass from '@/components/school-class/CurrentClass'; import CurrentClass from '@/components/school-class/CurrentClass';
import AddIcon from '@/components/icons/AddIcon';
import updateSelectedClassMixin from '@/mixins/updateSelectedClass'; import updateSelectedClassMixin from '@/mixins/updateSelectedClass';
import sidebarMixin from '@/mixins/sidebar'; import sidebarMixin from '@/mixins/sidebar';
@ -42,7 +46,8 @@
components: { components: {
WidgetPopover, WidgetPopover,
ChevronDown, ChevronDown,
CurrentClass CurrentClass,
AddIcon
}, },
props: { props: {
@ -97,6 +102,7 @@
left: 0; left: 0;
transform: translateY($small-spacing); transform: translateY($small-spacing);
} }
} }
.selected-class { .selected-class {

67
client/src/styles/_widget-popover.scss Normal file
View File

@ -0,0 +1,67 @@
@import "variables";
@import "mixins";
.widget-popover {
position: absolute;
right: 0;
display: flex;
flex-direction: column;
background-color: $color-white;
padding: 0;
z-index: 100;
@include widget-shadow;
&--mobile {
left: 0;
right: inherit;
}
}
.popover-links {
list-style: none;
display: grid;
&__icon {
width: 25px;
height: 25px;
margin-right: $small-spacing;
}
&__link-with-icon {
display: flex;
align-items: center;
}
&__link {
cursor: pointer;
padding: 0 $medium-spacing;
& > a {
display: inline-block;
color: $color-silver-dark;
font-family: $sans-serif-font-family;
font-size: toRem(14px);
line-height: 1.5;
padding: 5px 0;
cursor: pointer;
}
&--large {
line-height: 40px;
padding: $small-spacing $medium-spacing;
& > a, & {
@include small-text;
}
}
&--emph {
@include regular-text;
font-weight: 600;
}
}
&__divider {
border-top: 1px solid $color-silver-dark;
}
}

1
client/src/styles/main.scss
View File

@ -24,3 +24,4 @@
@import "module-activity"; @import "module-activity";
@import "book-subnavigation"; @import "book-subnavigation";
@import "simple-list"; @import "simple-list";
@import "widget-popover";