Changed toolbox button to switch and renamed toolbox

amd/src/page-edit-plan.js

@@ -78,6 +78,7 @@ export function init(contextid,categoryid) {
                 }
             },
             toolbox: {
+                shown: false,
                 right: true,
             },
             activestudyplan: null,
@@ -261,6 +262,10 @@ export function init(contextid,categoryid) {
                         download(plan.shortname+".json",response.content,response.format);
                     }).fail(notification.exception);    
             },
+            toggletoolbox(event) {
+                debug.info(event);
+                this.toolbox.shown = event;
+            }
         },
     });
 }

amd/src/studyplan-editor-components.js

@@ -70,6 +70,7 @@ export default {
         let strings = load_strings({
             studyplan_text: {
                 studyline_editmode: 'studyline_editmode',
+                toolbox_toggle: 'toolbox_toggle',
                 editmode_modules_hidden:'editmode_modules_hidden',
                 studyline_add: 'studyline_add',
                 add$core: 'add$core',
@@ -1308,6 +1309,7 @@ export default {
                         },
                     },
                     edit: {
+                        toolbox_shown: false,
                         studyline: {
                             editmode: false,
                             data: {   
@@ -1601,14 +1603,22 @@ export default {
                     }
                     return add_days(date,0 - days);
                 },
+                toolbox_switched(event){
+                    this.$emit('toggletoolbox',event);
+                }
             }
             ,
             template: 
             `
             <div>
                 <div class='controlbox t-studyplan-controlbox'>
-                    <b-form-checkbox v-model="edit.studyline.editmode" class="sw-studyline-editmode" switch
+                    <div class="controlbox-group">
+                        <b-form-checkbox v-model="edit.studyline.editmode" class="sw-studyplan-toolbar" switch
+                            @change="toolbox_switched(edit.toolbox_shown && !edit.studyline.editmode); "
                             >{{ text.studyline_editmode }}</b-form-checkbox>
+                        <b-form-checkbox v-if="!edit.studyline.editmode" v-model="edit.toolbox_shown" class="sw-studyplan-toolbar" switch
+                            @change="toolbox_switched"
+                            >{{ text.toolbox_toggle}}</b-form-checkbox>
                         <drop 
                             mode='copy'
                             class='t-item-deletebox text-danger border-danger'
@@ -1616,21 +1626,24 @@ export default {
                             :accepts-type="trashbin_accepts"
                             ><i class='fa fa-trash'></i>
                         </drop>
-                    <span class='control deletable'>
-                        <a v-if='page.studylines.length == 0' href='#' @click='deletePlan(value)'
-                            ><i class='text-danger fa fa-trash'></i></a>
-                    </span>
+                    </div>
+                    <div class="controlbox-group">
                         <span class='control editable'>
-                        <t-studyplan-edit v-model="value" @moved="movedStudyplan"
-                            ><i class='fa fa-gear'></i> {{text.edit$core}}</t-studyplan-edit>    
+                            <t-studyplan-advanced v-model="value"></t-studyplan-advanced>
                         </span>
                         <span class='control editable'>
                             <t-studyplan-associate 
                                 v-model="value"><i class='fa fa-users'></i> {{text.associations}}</t-studyplan-associate>
                         </span>
                         <span class='control editable'>
-                        <t-studyplan-advanced v-model="value"></t-studyplan-advanced>
+                            <t-studyplan-edit v-model="value" @moved="movedStudyplan"
+                                ><i class='fa fa-gear'></i> {{text.edit$core}}</t-studyplan-edit>    
                         </span>
+                        <span class='control deletable'>
+                            <a v-if='page.studylines.length == 0' href='#' @click='deletePlan(value)'
+                                ><i class='text-danger fa fa-trash'></i></a>
+                        </span>
+                    </div>
                 </div>
                 <div class='t-studyplan-content-edit' v-if="edit.studyline.editmode">
                     <drop-list

css/devstyles.css

@@ -212,10 +212,12 @@
 .path-local-treestudyplan .t-studyplan-controlbox,
 .features-treestudyplan .t-studyplan-controlbox {
     height: 30px;
+    display: flex;
+    justify-content: space-between;
+    max-width: 80em;
 }
 .path-local-treestudyplan .t-studyplan-controlbox .control,
 .features-treestudyplan .t-studyplan-controlbox .control {
-    float: right;
     margin-left: 10px;
     margin-right: 5px;
 }
@@ -544,8 +546,8 @@
     stroke: #f00;
     fill: #f00;
 }
-.path-local-treestudyplan .sw-studyline-editmode,
-.features-treestudyplan .sw-studyline-editmode {
+.path-local-treestudyplan .sw-studyplan-toolbar,
+.features-treestudyplan .sw-studyplan-toolbar {
     display: inline-block;
 }
 .path-local-treestudyplan .t-item-base .deletebox,

edit-plan.php

@@ -138,11 +138,10 @@ print $OUTPUT->header();
             <b-button v-if='!activestudyplan && !loadingstudyplan'
                       variant='danger' href='#' role='presentation' @click="import_studyplan "
                 ><i class='fa fa-upload'></i> <?php t("advanced_import_from_file");?></b-button>
-            <b-button v-if='activestudyplan' variant='primary' v-b-toggle.toolbox-sidebar><?php t('opentoolbox') ?></b-button>
         </div>
 
         <div class='t-studyplan-container'>
-            <t-studyplan v-if='activestudyplan' v-model='activestudyplan' @moved="movedStudyplan"></t-studyplan>
+            <t-studyplan v-if='activestudyplan' v-model='activestudyplan' @moved="movedStudyplan" @toggletoolbox="toggletoolbox"></t-studyplan>
             <div v-else-if='loadingstudyplan' class="spinner-border text-primary" role="status">
                 <span class="sr-only">Loading...</span>
             </div>
@@ -172,9 +171,10 @@ print $OUTPUT->header();
             id="toolbox-sidebar"
             :right='toolbox.right'
             shadow
-            title='<?php t("toolbox")?>'
+            v-model="toolbox.shown"
+            no-header
         >
-
+            <div class="m-3 border-bottom-1 border-primary"><h3><?php t("toolbox")?></h3></div>
             <div class='t-toolbox-preface'>
                 <b-form-checkbox v-model="toolbox.right" switch><?php t("toolbar-right");?></b-form-checkbox>
             </div>
@@ -182,7 +182,7 @@ print $OUTPUT->header();
                 <b-tab title="<?php t('courses')?>">
                     <t-coursecat-list v-model="courses"></t-coursecat-list>
                 </b-tab>
-                <b-tab title="<?php t('toolbox')?>">
+                <b-tab title="<?php t('flow')?>">
                     <ul class="t-toolbox">
                         <li><drag
                             :type="filterComponentType"

lang/en/local_treestudyplan.php

@@ -124,6 +124,7 @@ $string["studyplan_select_placeholder"] = "Select study plan";
 $string["studyline_add"] = 'Add study line';
 $string["studyline_edit"] = 'Edit study line';
 $string["studyline_editmode"] = 'Edit study lines';
+$string["toolbox_toggle"] = 'Insert components and courses';
 $string["studyline_remove"] = 'Remove study line';
 $string["studyline_confirm_remove"] = 'Are you sure you want to remove studyline {$a}?';
 $string["studyline_name"] = 'Full name';
@@ -135,9 +136,9 @@ $string["studyline_color"] = 'Background color';
 $string["studyitem_confirm_remove"] = 'Are you sure you want to remove module {$a}?';
 $string["editmode_modules_hidden"] = 'Modules hidden in edit mode';
 
-$string["toolbox"] = 'Toolbox';
-$string["opentoolbox"] = 'Open toolbox';
-$string["toolbar-right"] = 'Show toolbox at the right';
+$string["toolbox"] = 'Components';
+$string["flow"] = 'Flow';
+$string["toolbar-right"] = 'Show this bar at the right';
 
 $string["tool-junction"] = 'Junction';
 $string["tool-start"] = 'Start/continue';

lang/nl/local_treestudyplan.php

@@ -124,6 +124,7 @@ $string["studyplan_select_placeholder"] = "Selecteer studieplan";
 $string["studyline_add"] = 'Nieuwe leerlijn';
 $string["studyline_edit"] = 'Leerlijn bewerken';
 $string["studyline_editmode"] = 'Leerlijnen bewerken';
+$string["toolbox_toggle"] = 'Cursussen en elementen invoegen';
 $string["studyline_remove"] = 'Leerlijn verwijderen';
 $string["studyline_confirm_remove"] = 'Weet je zeker dat je leerlijn {$a} wilt verwijderen?';
 $string["studyline_name"] = 'Naam';
@@ -135,9 +136,9 @@ $string["studyline_color"] = 'Achtergrondkleur';
 $string["studyitem_confirm_remove"] = 'Weet je zeker dat je module {$a} wilt verwijderen?';
 $string["editmode_modules_hidden"] = 'Modules verborgen tijdens bewerken';
 
-$string["toolbox"] = 'Toolbox';
-$string["opentoolbox"] = 'Toolbox openen';
-$string["toolbar-right"] = 'Toolbox rechts tonen';
+$string["toolbox"] = 'Onderdelen';
+$string["flow"] = 'Flow';
+$string["toolbar-right"] = 'Deze balk rechts tonen';
 
 $string["tool-junction"] = 'Kruispunt';
 $string["tool-start"] = 'Start/Vervolgpunt';

scss/studyplan.scss

@@ -7,7 +7,6 @@
     .t-studyplan-container {
         margin-top: 16px;
         min-height: 500px;
-            
     }
 
     .t-studyplan-content,
@@ -116,10 +115,13 @@
 
     .t-studyplan-controlbox {
         height: 30px;
+        display: flex;
+        justify-content: space-between;
+        max-width: 80em;
     }
 
     .t-studyplan-controlbox .control {
-        float: right;
+        
         margin-left: 10px;
         margin-right: 5px;
     }
@@ -436,7 +438,7 @@
         fill: #f00;
     }
 
-    .sw-studyline-editmode {
+    .sw-studyplan-toolbar {
         display: inline-block;
     }
 

styles.css

@@ -212,10 +212,12 @@
 .path-local-treestudyplan .t-studyplan-controlbox,
 .features-treestudyplan .t-studyplan-controlbox {
     height: 30px;
+    display: flex;
+    justify-content: space-between;
+    max-width: 80em;
 }
 .path-local-treestudyplan .t-studyplan-controlbox .control,
 .features-treestudyplan .t-studyplan-controlbox .control {
-    float: right;
     margin-left: 10px;
     margin-right: 5px;
 }
@@ -544,8 +546,8 @@
     stroke: #f00;
     fill: #f00;
 }
-.path-local-treestudyplan .sw-studyline-editmode,
-.features-treestudyplan .sw-studyline-editmode {
+.path-local-treestudyplan .sw-studyplan-toolbar,
+.features-treestudyplan .sw-studyplan-toolbar {
     display: inline-block;
 }
 .path-local-treestudyplan .t-item-base .deletebox,