Miqra-Engineering/moodle_local_treestudyplan
2
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases 4 Wiki Activity

Styling fixes for studyplan editor

Browse Source
This commit is contained in:
PMKuipers 2023-07-26 23:24:34 +02:00
parent 1755a8c854
commit dcc9b5bcd6
2 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
amd/src/studyplan-editor-components.js
View File

@ -1343,7 +1343,7 @@ export default {
<template v-slot:item="{item}"> <template v-slot:item="{item}">
<drag <drag
:key="item.id" :key="item.id"
class='t-studyplan-drag' class='t-studyline-drag'
:data="item" :data="item"
:type="'studyline-'+page.id" :type="'studyline-'+page.id"
> >
@ -1352,7 +1352,6 @@ export default {
</template> </template>
<t-studyline-edit <t-studyline-edit
v-model="item" v-model="item"
:numlines='page.studylines.length'
@edit='editLineStart(item)' @edit='editLineStart(item)'
@delete='deleteLine(page,item)' @delete='deleteLine(page,item)'
> >
@ -1368,8 +1367,10 @@ export default {
<t-studyline-heading v-for="(line,lineindex) in page.studylines" <t-studyline-heading v-for="(line,lineindex) in page.studylines"
:key="line.id" :key="line.id"
v-model="page.studylines[lineindex]" v-model="page.studylines[lineindex]"
:numlines='page.studylines.length'
:layers='countLineLayers(line)+1' :layers='countLineLayers(line)+1'
:class=" 't-studyline' + ((lineindex%2==0)?' odd ' :' even ' )
+ ((lineindex==0)?' first ':' ')
+ ((lineindex==page.studylines.length-1)?' last ':' ')"
></t-studyline-heading> ></t-studyline-heading>
</div> </div>
<!-- Next, paint all the cells in the scrollable --> <!-- Next, paint all the cells in the scrollable -->
@ -1391,8 +1392,9 @@ export default {
:plan="value" :plan="value"
:page="page" :page="page"
:layer="layeridx-1" :layer="layeridx-1"
:class= "'t-studyline ' + ((line.sequence==1 && layeridx==1)?' first':'') + :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
(line.sequence==page.studylines.length?' last':'')" + ((lineindex==0 && layeridx==1)?' first ':' ')
+ ((lineindex==page.studylines.length-1)?' last ':' ')"
></t-studyline-slot ></t-studyline-slot
><t-studyline-slot ><t-studyline-slot
type='filter' type='filter'
@ -1403,10 +1405,10 @@ export default {
:plan="value" :plan="value"
:page="page" :page="page"
:layer="layeridx-1" :layer="layeridx-1"
:class=" 't-studyline ' :class="'t-studyline ' + ((lineindex%2==0)?' odd ':' even ')
+ ((line.sequence==1 && layeridx==1)?' first':'') + ((lineindex==0 && layeridx==1)?' first ':'')
+ (line.sequence==page.studylines.length?' last':'') + ((lineindex==page.studylines.length-1)?' last ':' ')
+ (index==page.slots?' end':'')" + ((index==page.periods)?' rightmost':'')"
> >
</t-studyline-slot </t-studyline-slot
></template ></template
@ -1499,10 +1501,6 @@ export default {
type: Object, // Studyline type: Object, // Studyline
default: function(){ return {};}, default: function(){ return {};},
}, },
numlines: {
type: Number,
default: 1,
},
layers: { layers: {
type: Number, type: Number,
default: 1, default: 1,
@ -1545,10 +1543,8 @@ export default {
} }
}, },
template: ` template: `
<div :class="'t-studyline t-studyline-heading' + ((value.sequence%2)?' odd':' even') + <div class="t-studyline t-studyline-heading "
(value.sequence==1?' first':'') + (value.sequence==numlines?' last':'')" :data-studyline="value.id" ref="mainEl"
:data-studyline="value.id" :data-sequence="value.sequence" :data-numlines="numlines"
ref="mainEl"
><div class="t-studyline-handle" :style="'background-color: ' + value.color"></div> ><div class="t-studyline-handle" :style="'background-color: ' + value.color"></div>
<div class="t-studyline-title"> <div class="t-studyline-title">
<abbr v-b-tooltip.hover :title="value.name">{{ value.shortname }}</abbr> <abbr v-b-tooltip.hover :title="value.name">{{ value.shortname }}</abbr>
@ -1565,18 +1561,7 @@ export default {
value : { value : {
type: Object, // Studyline type: Object, // Studyline
default: function(){ return {};}, default: function(){ return {};},
}, }
numlines: {
type: Number,
default: 1,
},
/*
:color='value.color'
:name='value.name'
:code='value.shortname'
:sequence='value.sequence'
*/
}, },
data() { data() {
return { return {
@ -1612,7 +1597,7 @@ export default {
}, },
template: ` template: `
<div :class="'t-studyline ' + (value.sequence==1?' first':'') + (value.sequence==numlines?' last':'')" > <div :class="'t-studyline '" >
<div class="t-studyline-handle" :style="'background-color: ' + value.color"></div> <div class="t-studyline-handle" :style="'background-color: ' + value.color"></div>
<div class="t-studyline-title"> <div class="t-studyline-title">
<div> <div>
@ -1623,13 +1608,15 @@ export default {
<div class='t-studyline-editmode-content'> <div class='t-studyline-editmode-content'>
<slot></slot> <slot></slot>
</div> </div>
<div class='controlbox' v-if='editable || deletable'> <div class='controlbox'>
<template v-if='editable || deletable'>
<span class='control editable'> <span class='control editable'>
<a href='#' @click='onEdit'><i class='fa fa-pencil'></i></a> <a href='#' @click='onEdit'><i class='fa fa-pencil'></i></a>
</span> </span>
<span class='control deletable'> <span class='control deletable'>
<a v-if='deletable' href='#' @click='onDelete'><i class='text-danger fa fa-trash'></i></a> <a v-if='deletable' href='#' @click='onDelete'><i class='text-danger fa fa-trash'></i></a>
</span> </span>
</template>
</div> </div>
</div> </div>
`, `,
@ -1823,9 +1810,8 @@ export default {
}, },
template: ` template: `
<div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ((slotindex==0)?' t-studyline-firstcolumn':'') <div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ' ' + ((slotindex==0)?' t-studyline-firstcolumn ':' ')"
+ ((line.sequence%2)?' odd':' even') " :data-studyline="line.id" ref="sizeElement"
:data-studyline="line.id" ref="sizeElement"
><drag v-if="item" ><drag v-if="item"
:key="item.id" :key="item.id"

35
css/devstyles.css
View File

@ -66,6 +66,11 @@ ul.dropdown-menu.show {
border-width: 1px; border-width: 1px;
} }
.t-studyline-drag .t-studyline {
justify-content: start;
}
.t-studyline.t-studyline-heading { .t-studyline.t-studyline-heading {
border-right-style: none; border-right-style: none;
} }
@ -74,11 +79,15 @@ ul.dropdown-menu.show {
border-right-style: solid; border-right-style: solid;
} }
.t-studyline .controlbox { .t-studyline .t-studyline-editmode-content {
border-left-style: solid; border-right-style: solid;
border-color: #cccccc; border-color: #cccccc;
border-width: 1px; border-width: 1px;
}
.t-studyline .controlbox {
white-space: nowrap; white-space: nowrap;
width: 64px;
} }
.t-studyline .control { .t-studyline .control {
display: inline-block; display: inline-block;
@ -541,21 +550,35 @@ a.t-item-course-config {
border-width: 1px; border-width: 1px;
} }
.t-studyline.even, .t-studyline-drag:nth-child(odd) .t-studyline div,
.r-studyline.odd { .t-studyline-heading.odd,
.r-studyline-heading.odd,
.t-studyline-slot.odd{
background-color: #f0f0f0; background-color: #f0f0f0;
} }
.t-studyline.first, .t-studyline-drag:first-child,
.t-studyline-heading.first,
.t-studyline-slot.first,
.r-studyline-heading.first,
.r-studyline.first { .r-studyline.first {
border-top-style: solid; border-top-style: solid;
} }
.t-studyline.last, .t-studyline-drag:last-child,
.t-studyline-heading.last,
.t-studyline-slot.last,
.r-studyline-heading.last,
.r-studyline.last { .r-studyline.last {
border-bottom-style: solid; border-bottom-style: solid;
} }
.t-studyline-slot.rightmost {
border-right-style: solid;
}
.t-studyline-handle, .t-studyline-handle,
.r-studyline-handle { .r-studyline-handle {
width: 10px; width: 10px;