Reworked sidebar

amd/build/util/psidebar-vue.min.js

@@ -0,0 +1,3 @@
+define("local_treestudyplan/util/psidebar-vue",["exports","./css-calc"],(function(_exports,_cssCalc){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={install(Vue){Vue.component("p-sidebar",{props:{value:{type:Boolean,default:!0},right:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1},target:{type:String,default:"body"},offsetRef:{type:String,default:""}},data:()=>({wrapper:null,contentwrapper:null,resizeobserver:null}),computed:{},methods:{initWrappers(target){this.wrapper=document.querySelector("#p-sidebar-wrapper"),this.wrapper||(this.wrapper=document.createElement("div"),this.wrapper.setAttribute("id","p-sidebar-wrapper")),this.contentwrapper=document.querySelector("#p-sidebar-contentwrapper"),this.contentwrapper||(this.contentwrapper=document.createElement("div"),this.contentwrapper.setAttribute("id","p-sidebar-contentwrapper"),this.wrapper.appendChild(this.contentwrapper));let targetEl=document.querySelector(target);for(console.info(`Targeting '${target}' to `,targetEl),targetEl&&"HTML"!=targetEl.nodeType||(targetEl=document.querySelector("body"));targetEl.childNodes.length>0;)this.contentwrapper.appendChild(targetEl.childNodes[0]);targetEl.appendChild(this.wrapper)},rePosition(right){const el=this.$refs.container;right?this.wrapper.insertBefore(el,this.contentwrapper.nextSibling):this.wrapper.insertBefore(el,this.contentwrapper)},setOffset(reference){const ref=reference?document.querySelector(reference):null;console.info(`Setting offset from '${reference}'`,ref);let offsetTop=ref?ref.offsetTop:0;offsetTop+=0!=offsetTop?"px":"";const el=this.$refs.container;el.style.height=`calc( 100vh - ${offsetTop})`,el.style.marginTop=offsetTop}},watch:{right(newVal){this.rePosition(newVal)},offsetRef(reference){this.setOffset(reference)}},mounted(){const el=this.$refs.container;this.initWrappers(this.target),this.setOffset(this.offsetRef),this.rePosition(this.right,this.besides),this.resizeObserver=new ResizeObserver((()=>{let wx=0-el.getBoundingClientRect().width;wx+=0!=wx?"px":"",el.style.setProperty("--p-sidebar-hideoffset",wx)})),this.resizeObserver.observe(el)},unmounted(){this.resizeObserver&&this.resizeObserver.disconnect()},template:"\n        <div>\n            <div ref='container' \n                :class=\"'p-sidebar ' + (right?'p-sidebar-right ':'') + (shadow?'p-sidebar-shadow ':'') + (value?'shown ':'hidden ')\"\n            ><slot></slot></div>\n        </div>\n        "})}};return _exports.default=_default,_exports.default}));
+
+//# sourceMappingURL=psidebar-vue.min.js.map

amd/build/util/settings.min.js

@@ -0,0 +1,3 @@
+define("local_treestudyplan/util/settings",["exports","core/ajax","core/notification"],(function(_exports,_ajax,_notification){var obj;Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.settings=function(key){const settings=loadsettings();return key in settings?settings[key]:null},_notification=(obj=_notification)&&obj.__esModule?obj:{default:obj};let settingcache=null;function loadsettings(){return settingcache||(0,_ajax.call)([{methodname:"local_treestudyplan_getsettings",args:{}}])[0].then((function(response){settingcache=response})).catch(_notification.default.exception),settingcache}loadsettings()}));
+
+//# sourceMappingURL=settings.min.js.map

amd/build/util/settings.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.min.js","sources":["../../src/util/settings.js"],"sourcesContent":["/*eslint no-var: \"error\" */\n/*eslint-env es6*/\n\nimport {call} from 'core/ajax';\nimport notification from 'core/notification';\n\n// Prepare default value.\nlet settingcache = null;\n\n/**\n * Check if premium status is enabled.\n * @param {String} key\n * @returns {}\n */\nexport function settings ( key ){\n    const settings = loadsettings();\n    if ( key in settings ) {\n        return settings[key];\n    } else {\n        return null;\n    }\n}\n\n/**\n * Get settings from server or cache\n * @returns {Object} The settings object\n */\nfunction loadsettings() {\n    if (!settingcache) {\n        // Retrieve setting cache if needed.\n        call([{\n            methodname: 'local_treestudyplan_getsettings',\n            args: {}\n        }])[0].then(function(response){\n            settingcache = response;\n        }).catch(notification.exception);\n    }\n    return settingcache;\n}\n\n// Preload premium status.\nloadsettings();"],"names":["key","settings","loadsettings","settingcache","methodname","args","then","response","catch","notification","exception"],"mappings":"0NAc2BA,WACjBC,SAAWC,sBACZF,OAAOC,SACDA,SAASD,KAET,8EAZXG,aAAe,cAoBVD,sBACAC,6BAEI,CAAC,CACFC,WAAY,kCACZC,KAAM,MACN,GAAGC,MAAK,SAASC,UACjBJ,aAAeI,YAChBC,MAAMC,sBAAaC,WAEnBP,aAIXD"}

amd/src/studyplan-editor-components.js

@@ -18,10 +18,11 @@ import Config from 'core/config';
 import {download,upload} from './downloader';
 import {ProcessStudyplan, ProcessStudyplanPage} from './studyplan-processor';
 /*import {eventTypes as editSwEventTypes} from 'core/edit_switch';*/
-import { premiumenabled, premiumstatus } from "./util/premium";
+import { premiumenabled } from "./util/premium";
-
+import { settings } from "./util/settings";
 import TSComponents from './treestudyplan-components';
 import mFormComponents from "./util/mform-helper";
+import pSideBarComponents from "./util/psidebar-vue";
 
 import {Drag, Drop, DropList} from './vue-easy-dnd/vue-easy-dnd.esm';
 
@@ -49,6 +50,7 @@ export default {
         Vue.component('drop-list',DropList);
         Vue.use(TSComponents);
         Vue.use(mFormComponents);
+        Vue.use(pSideBarComponents);
         let debug = new Debugger("treestudyplan-editor");
         /************************************
          *                                  *
@@ -1821,7 +1823,6 @@ export default {
                                     :items="page.studylines"
                                     class="t-slot-droplist"
                                     :accepts-type="'studyline-'+page.id"
-                                    xreorder="$event.apply(page.studylines)"
                                     @reorder="reorderLines($event,page.studylines)"
                                     mode="copy"
                                     row
@@ -1876,6 +1877,7 @@ export default {
                                     <!-- add period information --> 
                                     <template v-for="(n,index) in (page.periods+1)">
                                         <s-studyline-header-period
+                                            mode="edit"
                                             :identifier='Number(page.id)'
                                             v-if="index > 0"
                                             v-model="page.perioddesc[index-1]"
@@ -2317,6 +2319,9 @@ export default {
                 };
             },
             methods: {
+                hivizdrop() {
+                    return settings("hivizdropslots");
+                },
                 onDrop(event) {
                     this.hover.component = null;
                     this.hover.type = null;
@@ -2474,7 +2479,7 @@ export default {
                         ></t-item
                     ></drag
                 ><drop v-else
-                    :class="'t-slot-drop '+type + (layer > 0?' secondary':' primary')"
+                    :class="'t-slot-drop '+type + (layer > 0?' secondary':' primary') + (hivizdrop()?' hiviz':'')"
                     :accepts-type="checkType"
                     @drop="onDrop"
                     mode="cut"
@@ -4142,6 +4147,7 @@ export default {
             template: `
             <ul class="t-course-list">
                 <li class="t-course-list-item" v-for="course in value" :key="course.id">
+                    <span class='t-course-heading'>
                     <drag
                         class="draggable-course"
                         :data="course"
@@ -4150,6 +4156,7 @@ export default {
                     >
                     <i class="t-course-list-item fa fa-book"></i> {{ course.shortname }} - {{ course.fullname }}
                     </drag>
+                    </span>
                 </li>
             </ul>
             `,
@@ -4176,7 +4183,7 @@ export default {
             },
             data() {
                 return {
-                    toolboxright: true, 
+                    toolboxright: !(settings("toolboxleft")), 
                     text: strings.toolbox,
                     relatedbadges: [],
                     systembadges: [],
@@ -4319,12 +4326,11 @@ export default {
             },
             template: `
             <div class="t-toolbox">
-                <b-sidebar
+                <p-sidebar
-                    id="toolbox-sidebar"
                     :right='toolboxright'
                     shadow
                     v-model="value"
-                    no-header
+                    offsetRef="#page"
                 >
                     <div class="m-3 border-bottom-1 border-primary"><h3>{{text.toolbox}}</h3></div>
                     <div class='t-toolbox-preface'>
@@ -4429,7 +4435,7 @@ export default {
                             </b-card>
                         </b-tab>
                     </b-tabs>
-                </b-sidebar>
+                </p-sidebar>
             </div>
             `,
         });

amd/src/treestudyplan-components.js

@@ -245,6 +245,10 @@ export default {
                 identifier: {
                     type: Number, // Page reference.
                     default() { return 0;}
+                },
+                mode: {
+                    type: String,
+                    default: "view",
                 }
             },
             mounted() {
@@ -302,7 +306,7 @@ export default {
                     class="s-studyline-header-period-datespan small">
                     <span class="date">{{ startdate }}</span> - <span class="date">{{ enddate }}</span>
                 </p>
-                <div v-if="current" class='s-studyline-period-highlight'></div>
+                <div v-if="current && mode == 'view'" class='s-studyline-period-highlight'></div>
             </div>
             `,
         });

amd/src/util/psidebar-vue.js

@@ -0,0 +1,132 @@
+/*eslint no-unused-vars: warn */
+/*eslint max-len: ["error", { "code": 160 }] */
+/*eslint-disable no-trailing-spaces */
+/*eslint-disable no-console */
+/*eslint-env es6*/
+
+import {calc} from "./css-calc";
+
+export default {
+    install(Vue/*,options*/){
+        Vue.component('p-sidebar',{
+        props: {
+            value: {
+                type: Boolean,
+                default: true,
+            },
+            right: {
+                type: Boolean,
+                default: false,
+            },
+            shadow: {
+                type: Boolean,
+                default: false,
+            },
+            target: {
+                type: String,
+                default: 'body',
+            },
+            offsetRef: {
+                type: String,
+                default: '',
+            }
+        },
+        data() {
+            return {
+                wrapper: null,
+                contentwrapper: null,
+                resizeobserver: null,
+            };
+        },
+        computed: {
+        },
+        methods: {
+            initWrappers(target) {
+                // First check if the sidebar wrapper already exists.
+                this.wrapper = document.querySelector("#p-sidebar-wrapper");
+                if (! this.wrapper) {
+                    // Otherwise, create it.
+                    this.wrapper = document.createElement("div");
+                    this.wrapper.setAttribute("id","p-sidebar-wrapper");
+                }
+                // First check if the contentwrapper already exists
+                this.contentwrapper = document.querySelector("#p-sidebar-contentwrapper");
+                if (!this.contentwrapper) {
+                    // Otherwise, create it.
+                    this.contentwrapper = document.createElement("div");
+                    this.contentwrapper.setAttribute("id","p-sidebar-contentwrapper");
+                    this.wrapper.appendChild(this.contentwrapper);
+                }
+
+                // Find containing target (otherwise use body)
+                let targetEl = document.querySelector(target);
+                    console.info(`Targeting '${target}' to `,targetEl);
+                if (!targetEl || targetEl.nodeType == "HTML") {
+                    targetEl = document.querySelector("body");
+                }
+                // Move all target content parts to content wrapper....
+                while (targetEl.childNodes.length >0) {
+                    this.contentwrapper.appendChild(targetEl.childNodes[0]);
+                }
+                // Add sidebar wrapper to target Element
+                targetEl.appendChild(this.wrapper);
+            
+            },
+            rePosition(right) {
+                // Place the container elsewhere in the DOM.
+                const el = this.$refs.container;
+
+
+                if(right) {
+                    this.wrapper.insertBefore(el,this.contentwrapper.nextSibling);
+                } else {
+                    this.wrapper.insertBefore(el,this.contentwrapper);
+                }
+            },
+            setOffset(reference) {
+                const ref = reference?document.querySelector(reference):null;
+                console.info(`Setting offset from '${reference}'`,ref);
+                let offsetTop = (ref?ref.offsetTop:0);
+                offsetTop+=(offsetTop!=0)?"px":"";
+                const el = this.$refs.container;
+                el.style.height=`calc( 100vh - ${offsetTop})`;
+                el.style.marginTop=offsetTop;
+            }
+
+        },
+        watch: {
+            right(newVal) {
+                this.rePosition(newVal);
+            },
+            offsetRef(reference) {
+                this.setOffset(reference);
+            }
+        },
+        mounted() {
+            const self = this;
+            const el = self.$refs.container;
+            this.initWrappers(this.target);
+            this.setOffset(this.offsetRef);
+            this.rePosition(this.right,this.besides);
+            this.resizeObserver = new ResizeObserver(() => {
+                let  wx = 0 - el.getBoundingClientRect().width;
+                wx += (wx!=0)?"px":"";
+                el.style.setProperty("--p-sidebar-hideoffset",wx);
+            });
+            this.resizeObserver.observe(el);
+        },
+        unmounted() {
+            if(this.resizeObserver) {
+                this.resizeObserver.disconnect();
+            }
+        },
+        template: `
+        <div>
+            <div ref='container' 
+                :class="'p-sidebar ' + (right?'p-sidebar-right ':'') + (shadow?'p-sidebar-shadow ':'') + (value?'shown ':'hidden ')"
+            ><slot></slot></div>
+        </div>
+        `,
+        });
+    },
+};

amd/src/util/settings.js

@@ -0,0 +1,42 @@
+/*eslint no-var: "error" */
+/*eslint-env es6*/
+
+import {call} from 'core/ajax';
+import notification from 'core/notification';
+
+// Prepare default value.
+let settingcache = null;
+
+/**
+ * Check if premium status is enabled.
+ * @param {String} key
+ * @returns {}
+ */
+export function settings ( key ){
+    const settings = loadsettings();
+    if ( key in settings ) {
+        return settings[key];
+    } else {
+        return null;
+    }
+}
+
+/**
+ * Get settings from server or cache
+ * @returns {Object} The settings object
+ */
+function loadsettings() {
+    if (!settingcache) {
+        // Retrieve setting cache if needed.
+        call([{
+            methodname: 'local_treestudyplan_getsettings',
+            args: {}
+        }])[0].then(function(response){
+            settingcache = response;
+        }).catch(notification.exception);
+    }
+    return settingcache;
+}
+
+// Preload premium status.
+loadsettings();

classes/premium.php

@@ -38,7 +38,7 @@ class premium extends \external_api {
 
     // Toggle the variable below to enable support for premium stuff.
     // If set to false, all premium features will be enabled and no premium settings panel will be visible.
-    private static $premium_supported = false;
+    private static $premium_supported = true;
 
     private static $premiumcrt = "-----BEGIN CERTIFICATE-----
 MIIDSzCCAjMCFFlyhmKf1fN7U5lQL/dtlsyP24AQMA0GCSqGSIb3DQEBCwUAMGEx

classes/studyplanservice.php

@@ -2222,6 +2222,7 @@ class studyplanservice extends \external_api {
      */
     public static function count_templates() {
         \external_api::validate_context(\context_system::instance());
+        require_login(null,false,null);
         return studyplan::count_template();
     }
 }

classes/utilityservice.php

@@ -142,7 +142,9 @@ class utilityservice extends \external_api {
      * Return value description for webservice function submit_cm_editform
      */
     public static function submit_mform_returns() : \external_description {
-        return success::structure();
+        return new \external_multiple_structure(new \external_single_structure([
+            "id" => new \external_value(PARAM_INT, 'id of studyline'),
+        ]));
     }
 
     /**
@@ -167,5 +169,37 @@ class utilityservice extends \external_api {
     }
 
 
+        /**
+     * Parameter description for webservice function submit_cm_editform
+     */
+    public static function getsettings_parameters() : \external_function_parameters {
+        return new \external_function_parameters( [
+        ] );
+    }
+
+    /**
+     * Return value description for webservice function submit_cm_editform
+     */
+    public static function getsettings_returns() : \external_description {
+        return new \external_single_structure([
+            "hivizdropslots" => new \external_value(PARAM_BOOL, 'High visibility drop slots for items'),
+            "toolboxleft" => new \external_value(PARAM_BOOL, 'Start toolbox default on left side'),
+        ]);
+    }
+
+    /**
+     * Submit specified form data into form
+     * @return array Success/fail structure
+     */
+    public static function getsettings() {
+        \external_api::validate_context(\context_system::instance());
+        require_login(null,false,null);
+
+        return [
+            "hivizdropslots" => get_config("local_treestudyplan","hivizdropslots"),
+            "toolboxleft" => get_config("local_treestudyplan","toolboxleft")
+        ];
+    }
+
 
 }

css/devstyles.css

@@ -318,17 +318,25 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .features-treestudyplan li.t-coursecat-list-item i.t-caret {
     width: 9px;
 }
-.path-local-treestudyplan li.t-coursecat-list-item,
+.path-local-treestudyplan .t-coursecat-heading,
+.path-local-treestudyplan .t-course-heading,
+.features-treestudyplan .t-coursecat-heading,
+.features-treestudyplan .t-course-heading {
+    min-width: 180px;
+    max-width: 240px;
+    display: inline-block;
+}
+.path-local-treestudyplan li.t-coursecat-list-item .draggable-course,
 .path-local-treestudyplan li.t-course-list-item .draggable-course,
-.features-treestudyplan li.t-coursecat-list-item,
+.features-treestudyplan li.t-coursecat-list-item .draggable-course,
 .features-treestudyplan li.t-course-list-item .draggable-course {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.path-local-treestudyplan li.t-coursecat-list-item:hover,
+.path-local-treestudyplan li.t-coursecat-list-item .draggable-course:hover,
 .path-local-treestudyplan li.t-course-list-item .draggable-course:hover,
-.features-treestudyplan li.t-coursecat-list-item:hover,
+.features-treestudyplan li.t-coursecat-list-item .draggable-course:hover,
 .features-treestudyplan li.t-course-list-item .draggable-course:hover {
     text-overflow: clip;
     white-space: normal;
@@ -421,6 +429,7 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .path-local-treestudyplan .s-studyline-period-highlight,
 .features-treestudyplan .s-studyline-period-highlight {
     position: absolute;
+    pointer-events: none;
     width: 100%;
     height: 50000px;
     opacity: var(--highlight-mix);
@@ -493,6 +502,11 @@ body.path-local-treestudyplan .editmode-switch-form > * {
     align-content: center;
     justify-content: center;
 }
+.path-local-treestudyplan .t-slot-drop.hiviz.drop-allowed,
+.features-treestudyplan .t-slot-drop.hiviz.drop-allowed {
+    min-height: 44px;
+    background-color: yellow;
+}
 .path-local-treestudyplan .t-slot-drop.competency,
 .features-treestudyplan .t-slot-drop.competency {
     min-width: 100px;
@@ -509,6 +523,11 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .features-treestudyplan .t-slot-drop.secondary.drop-allowed {
     min-height: 5px;
 }
+.path-local-treestudyplan .t-slot-drop.secondary.drop-allowed.hiviz,
+.features-treestudyplan .t-slot-drop.secondary.drop-allowed.hiviz {
+    min-height: 44px;
+    background-color: yellow;
+}
 .path-local-treestudyplan .t-item-deletebox,
 .features-treestudyplan .t-item-deletebox {
     display: inline-block;
@@ -1818,3 +1837,44 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .features-treestudyplan .collapse.show {
     height: auto;
 }
+
+#p-sidebar-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    overflow: hidden;
+}
+#p-sidebar-wrapper #p-sidebar-contentwrapper {
+    flex: 1 1 auto;
+    transition: all 0.3s ease-in-out;
+}
+#p-sidebar-wrapper .p-sidebar {
+    position: relative;
+    top: 0;
+    min-width: 320px;
+    width: auto;
+    max-width: 430px;
+    height: 100vh;
+    max-height: 100%;
+    margin: 0;
+    outline: 0;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    background-color: var(--light);
+    display: block;
+    transition: all 0.3s ease-in-out;
+    z-index: 100;
+    --p-sidebar-hideoffset: -320px;
+}
+#p-sidebar-wrapper .p-sidebar.p-sidebar-shadow {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+#p-sidebar-wrapper .p-sidebar.shown {
+    display: block;
+}
+#p-sidebar-wrapper .p-sidebar:not(.p-sidebar-right).hidden {
+    margin-left: var(--p-sidebar-hideoffset);
+}
+#p-sidebar-wrapper .p-sidebar.p-sidebar-right.hidden {
+    margin-right: var(--p-sidebar-hideoffset);
+}

db/services.php

@@ -823,5 +823,14 @@ $functions = [
         'capabilities'  => '',
         'loginrequired' => true,
     ],
+    'local_treestudyplan_getsettings' => [         // Web service function name.
+        'classname'     => '\local_treestudyplan\utilityservice',  // Class containing the external function.
+        'methodname'    => 'getsettings',          // External function name.
+        'description'   => 'Get some studypln related settings',
+        'type'          => 'read',                  // Database rights of the web service function (read, write).
+        'ajax'          => true,
+        'capabilities'  => '',
+        'loginrequired' => true,
+    ],
 
 ];

lang/en/local_treestudyplan.php

@@ -125,6 +125,11 @@ $string["settingdesc_courseprogressbar"] = 'Show a progress bar in the course po
 $string["setting_infofields_heading"] = 'Extra course information fields';
 $string["settingdesc_infofields_heading"] = 'Select up to 5 fields or custom fields to add to the course popup';
 
+$string["setting_hivizdropslots"] = 'High visibility drop fields';
+$string["settingdesc_hivizdropslots"] = 'Give the drop fields when editing a study plan extra visibility';
+
+$string["setting_toolboxleft"] = 'Toolbar left side by default';
+$string["settingdesc_toolboxleft"] = 'Show the course and component toolbar on the left by default, instead of the right side of the screen';
 
 $string["infofield_position_above"] = 'Above course results';
 $string["infofield_position_below"] = 'Below course results';

lang/nl/local_treestudyplan.php

@@ -124,7 +124,13 @@ $string["setting_courseprogressbar"] = 'Toon voortgangsbalk in cursus';
 $string["settingdesc_courseprogressbar"] = 'Laat een voortgangsbalk zien in de cursuspopup';
 
 $string["setting_infofields_heading"] = 'Extra cursusinformatie in popup';
-$string["settingdesc_infofields_heading"] = 'Kies tot 5 extra velden om in het cursuspopupvenster te laten zien';
+$string["settingdesc_infofields_heading"] = 'Kies tot 5 extra velden om in het cursuspopupvenster te laten zien.';
+
+$string["setting_hivizdropslots"] = 'Extra zichtbare sleepvelden';
+$string["settingdesc_hivizdropslots"] = 'Maak de velden waar cursussen heen gesleept kunnen worden extra goed zichtbaar.';
+
+$string["setting_toolboxleft"] = 'Toolcox standaard links';
+$string["settingdesc_toolboxleft"] = 'Toon de toolbox met cursussen en componenten standaard links in plaats van rechts.';
 
 $string["infofield_position_above"] = 'Boven cursusresultaten';
 $string["infofield_position_below"] = 'Onder cursusresultaten';

scss/psidebar.scss

@@ -0,0 +1,49 @@
+#p-sidebar-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    overflow: hidden;
+
+    #p-sidebar-contentwrapper {
+        flex: 1 1 auto;
+        transition: all 0.3s ease-in-out;
+    }
+
+    .p-sidebar {
+        position: relative;
+        top: 0;
+        min-width: 320px;
+        width: auto;
+        max-width: 430px;
+        height: 100vh;
+        max-height: 100%;
+        margin: 0;
+        outline: 0;
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        background-color: var(--light);
+        display: block;
+        transition: all 0.3s ease-in-out;
+        z-index: 100;
+        --p-sidebar-hideoffset: -320px;
+
+        &.p-sidebar-shadow {
+            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+        }
+        &.shown {
+            display: block;
+
+        }
+        &:not(.p-sidebar-right).hidden {
+            margin-left: var(--p-sidebar-hideoffset);
+        }
+        &.p-sidebar-right.hidden {
+            margin-right: var(--p-sidebar-hideoffset);
+        }
+    }
+
+
+
+
+}
+

scss/studyplan.scss

@@ -211,8 +211,16 @@
         }
 
     }
+    .t-coursecat-heading, .t-course-heading {
+        min-width: 180px;
+        max-width: 240px;
+        display: inline-block;
+    }
 
-    li.t-coursecat-list-item, li.t-course-list-item .draggable-course {
+
+    li.t-coursecat-list-item, li.t-course-list-item {
+
+        .draggable-course {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -223,7 +231,7 @@
                 word-break: break-word;
             }
         }
-
+    }
 
     i.t-coursecat-list-item {
         color: var(--coursecat-list);
@@ -307,6 +315,7 @@
 
     .s-studyline-period-highlight {
         position:absolute;
+        pointer-events: none;
         width: 100%;
         height: 50000px;
 
@@ -376,6 +385,10 @@
         flex-direction: column;
         align-content: center;
         justify-content: center;
+        &.hiviz.drop-allowed {
+            min-height: 44px;
+            background-color: yellow;
+        }
     }
 
     .t-slot-drop.competency {
@@ -392,6 +405,10 @@
 
     .t-slot-drop.secondary.drop-allowed {
         min-height: 5px;
+        &.hiviz {
+            min-height: 44px;
+            background-color: yellow;
+        }
     }
 
     .t-item-deletebox {

scss/styles.scss

@@ -5,3 +5,4 @@
 @import "studyplancard.scss";
 @import "studyplan-report.scss";
 @import "bootstraptweaking.scss";
+@import "psidebar.scss";

settings.php

@@ -127,6 +127,20 @@ if ($hassiteconfig) {
         false,
     ));
 
+    //get_config("local_treestudyplan","hivizdropslots")
+    $page->add(new admin_setting_configcheckbox('local_treestudyplan/hivizdropslots',
+        get_string('setting_hivizdropslots', 'local_treestudyplan'),
+        get_string('settingdesc_hivizdropslots', 'local_treestudyplan'),
+        false,
+    ));
+
+    //get_config("local_treestudyplan","toolboxleft")
+    $page->add(new admin_setting_configcheckbox('local_treestudyplan/toolboxleft',
+        get_string('setting_toolboxleft', 'local_treestudyplan'),
+        get_string('settingdesc_toolboxleft', 'local_treestudyplan'),
+        false,
+    ));
+    
     if (premium::enabled()) {
         //get_config("local_treestudyplan","enablecoach")
         $page->add(new admin_setting_configcheckbox('local_treestudyplan/enablecoach',

styles.css

@@ -318,17 +318,25 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .features-treestudyplan li.t-coursecat-list-item i.t-caret {
     width: 9px;
 }
-.path-local-treestudyplan li.t-coursecat-list-item,
+.path-local-treestudyplan .t-coursecat-heading,
+.path-local-treestudyplan .t-course-heading,
+.features-treestudyplan .t-coursecat-heading,
+.features-treestudyplan .t-course-heading {
+    min-width: 180px;
+    max-width: 240px;
+    display: inline-block;
+}
+.path-local-treestudyplan li.t-coursecat-list-item .draggable-course,
 .path-local-treestudyplan li.t-course-list-item .draggable-course,
-.features-treestudyplan li.t-coursecat-list-item,
+.features-treestudyplan li.t-coursecat-list-item .draggable-course,
 .features-treestudyplan li.t-course-list-item .draggable-course {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.path-local-treestudyplan li.t-coursecat-list-item:hover,
+.path-local-treestudyplan li.t-coursecat-list-item .draggable-course:hover,
 .path-local-treestudyplan li.t-course-list-item .draggable-course:hover,
-.features-treestudyplan li.t-coursecat-list-item:hover,
+.features-treestudyplan li.t-coursecat-list-item .draggable-course:hover,
 .features-treestudyplan li.t-course-list-item .draggable-course:hover {
     text-overflow: clip;
     white-space: normal;
@@ -421,6 +429,7 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .path-local-treestudyplan .s-studyline-period-highlight,
 .features-treestudyplan .s-studyline-period-highlight {
     position: absolute;
+    pointer-events: none;
     width: 100%;
     height: 50000px;
     opacity: var(--highlight-mix);
@@ -493,6 +502,11 @@ body.path-local-treestudyplan .editmode-switch-form > * {
     align-content: center;
     justify-content: center;
 }
+.path-local-treestudyplan .t-slot-drop.hiviz.drop-allowed,
+.features-treestudyplan .t-slot-drop.hiviz.drop-allowed {
+    min-height: 44px;
+    background-color: yellow;
+}
 .path-local-treestudyplan .t-slot-drop.competency,
 .features-treestudyplan .t-slot-drop.competency {
     min-width: 100px;
@@ -509,6 +523,11 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .features-treestudyplan .t-slot-drop.secondary.drop-allowed {
     min-height: 5px;
 }
+.path-local-treestudyplan .t-slot-drop.secondary.drop-allowed.hiviz,
+.features-treestudyplan .t-slot-drop.secondary.drop-allowed.hiviz {
+    min-height: 44px;
+    background-color: yellow;
+}
 .path-local-treestudyplan .t-item-deletebox,
 .features-treestudyplan .t-item-deletebox {
     display: inline-block;
@@ -1818,3 +1837,44 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 .features-treestudyplan .collapse.show {
     height: auto;
 }
+
+#p-sidebar-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    overflow: hidden;
+}
+#p-sidebar-wrapper #p-sidebar-contentwrapper {
+    flex: 1 1 auto;
+    transition: all 0.3s ease-in-out;
+}
+#p-sidebar-wrapper .p-sidebar {
+    position: relative;
+    top: 0;
+    min-width: 320px;
+    width: auto;
+    max-width: 430px;
+    height: 100vh;
+    max-height: 100%;
+    margin: 0;
+    outline: 0;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    background-color: var(--light);
+    display: block;
+    transition: all 0.3s ease-in-out;
+    z-index: 100;
+    --p-sidebar-hideoffset: -320px;
+}
+#p-sidebar-wrapper .p-sidebar.p-sidebar-shadow {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+#p-sidebar-wrapper .p-sidebar.shown {
+    display: block;
+}
+#p-sidebar-wrapper .p-sidebar:not(.p-sidebar-right).hidden {
+    margin-left: var(--p-sidebar-hideoffset);
+}
+#p-sidebar-wrapper .p-sidebar.p-sidebar-right.hidden {
+    margin-right: var(--p-sidebar-hideoffset);
+}

version.php

@@ -22,7 +22,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'local_treestudyplan';  // Recommended since 2.0.2 (MDL-26035). Required since 3.0 (MDL-48494).
-$plugin->version = 2024041901;  // YYYYMMDDHH (year, month, day, iteration).
+$plugin->version = 2024041904;  // YYYYMMDDHH (year, month, day, iteration).
 $plugin->requires = 2021051700; // YYYYMMDDHH (This is the release version for Moodle 3.11).
 
 $plugin->release = "1.1.6";