Enh: Migration to Bootstrap 5 for HumHub 1.18

Author: marc-farre

components/BaseFileController.php

@@ -8,11 +8,10 @@
 
 namespace humhub\modules\drawio\components;
 
+use humhub\components\Controller;
+use humhub\modules\file\models\File;
 use Yii;
 use yii\web\HttpException;
-use yii\helpers\Url;
-use humhub\modules\file\models\File;
-use humhub\components\Controller;
 
 /**
  * Description of BaseFileController

docs/CHANGELOG.md

@@ -1,10 +1,11 @@
 Changelog
 =========
 
-1.0.6 - Unreleased
+1.1.0 (Unreleased)
 ----------------------
 - Enh #18: Update Active Form for Bootstrap 5
 - Enh #19: Use PHP CS Fixer
+- Enh: Migration to Bootstrap 5 for HumHub 1.18
 
 1.0.5 - April 4, 2024
 ----------------------

README.md docs/README.mdREADME.md renamed to docs/README.md

@@ -6,4 +6,4 @@ Create charts in the easiest way imaginable. With our draw.io integration it has
 
 - Create, edit and share diagrams with the well renowned tool
 - Increase your productivity by collaboratively designing projects
-- Comment, discuss and show your appreciaten with a like
+- Comment, discuss and show your appreciation with a like

module.json

@@ -7,9 +7,9 @@
         "diagrams",
         "visualization"
     ],
-    "version": "1.0.6",
+    "version": "1.1.0",
     "humhub": {
-        "minVersion": "1.10"
+        "minVersion": "1.18"
     },
     "homepage": "https://github.com/humhub-contrib/drawio",
     "authors": [
@@ -22,9 +22,9 @@
 
     ],
     "screenshots": [
-        "resources/screen1.PNG", 
-        "resources/screen2.PNG", 
-        "resources/screen3.PNG", 
+        "resources/screen1.PNG",
+        "resources/screen2.PNG",
+        "resources/screen3.PNG",
         "resources/screen4.PNG"
-    ]   
+    ]
 }

views/admin/index.php

@@ -1,7 +1,8 @@
 <?php
 
-use humhub\modules\ui\form\widgets\ActiveForm;
+use humhub\widgets\form\ActiveForm;
 use yii\helpers\Html;
+
 ?>
 
 <div class="panel panel-default">
@@ -11,11 +12,11 @@
     <div class="panel-body">
 
         <?php $form = ActiveForm::begin(['id' => 'configure-form']); ?>
-        <div class="form-group">
+        <div class="mb-3">
             <?= $form->field($model, 'serverUrl'); ?>
         </div>
 
-        <div class="form-group">
+        <div class="mb-3">
             <?= Html::submitButton('Save', ['class' => 'btn btn-primary', 'data-ui-loader' => '']) ?>
         </div>
 

views/create/index.php

@@ -1,28 +1,18 @@
 <?php
 
+use humhub\helpers\Html;
 use humhub\modules\drawio\assets\Assets;
-use humhub\modules\ui\form\widgets\ActiveForm;
-use humhub\libs\Html;
-use humhub\widgets\ModalDialog;
+use humhub\widgets\modal\Modal;
 
 Assets::register($this);
-
-$modal = ModalDialog::begin([
-    'header' => Yii::t('DrawioModule.base', '<strong>Create</strong> draw.io diagram'),
-])
 ?>
 
-<?php $form = ActiveForm::begin(); ?>
+<?php $form = Modal::beginFormDialog([
+    'title' => Yii::t('DrawioModule.base', '<strong>Create</strong> draw.io diagram'),
+    'footer' => Html::submitButton('Save', ['data-action-click' => 'drawio.createSubmit', 'data-ui-loader' => '', 'class' => 'btn btn-primary']),
+]) ?>
 
-<div class="modal-body">
-    <?= $form->field($model, 'fileName', ['template' => '{label}<div class="input-group">{input}<div class="input-group-addon">' . $ext . '</div></div>{hint}{error}']); ?>
+    <?= $form->field($model, 'fileName', ['template' => '{label}<div class="input-group">{input}<div class="input-group-text">' . $ext . '</div></div>{hint}{error}']); ?>
     <?= $form->field($model, 'openFlag')->checkbox(); ?>
-</div>
-
-<div class="modal-footer">
-    <?= Html::submitButton('Save', ['data-action-click' => 'drawio.createSubmit', 'data-ui-loader' => '', 'class' => 'btn btn-primary']); ?>
-</div>
-
-<?php ActiveForm::end(); ?>
 
-<?php ModalDialog::end(); ?>
+<?php Modal::endFormDialog()?>

views/open/index.php

@@ -1,22 +1,24 @@
-<div class="modal-dialog animated fadeIn" style="width:96%">
-    <div class="modal-content drawioModal" style="background-color:transparent;">
-        <?=
-        \humhub\modules\drawio\widgets\EditorWidget::widget([
-            'file' => $file,
-        ]);
-        ?>
-    </div>
-</div>
-<script <?= \humhub\libs\Html::nonce() ?>>
-    window.onload = function (evt) {
-        setSize();
-    }
-    window.onresize = function (evt) {
-        setSize();
-    }
-    setSize();
+<?php
 
-    function setSize() {
-        $('.drawioModal').css('height', window.innerHeight - 110 + 'px');
-    }
-</script>
+use humhub\components\View;
+use humhub\modules\drawio\widgets\EditorWidget;
+use humhub\modules\file\models\File;
+use humhub\widgets\modal\Modal;
+
+/**
+ * @var $file File
+ * @var $this View
+ */
+
+// Force modal full height
+$this->registerCss('#drawio-modal .modal-content {height: calc(100vh - 45px);}');
+?>
+
+<?php Modal::beginDialog([
+    'size' => Modal::SIZE_EXTRA_LARGE,
+    'closeButton' => false,
+]) ?>
+    <?= EditorWidget::widget([
+        'file' => $file,
+    ]) ?>
+<?php Modal::endDialog() ?>

widgets/EditorWidget.php

@@ -8,7 +8,7 @@
 
 namespace humhub\modules\drawio\widgets;
 
-use humhub\libs\Html;
+use humhub\helpers\Html;
 use humhub\modules\file\libs\FileHelper;
 use humhub\modules\file\models\File;
 use humhub\widgets\JsWidget;

widgets/views/editor.php

@@ -1,8 +1,9 @@
 <?php
 
-use humhub\libs\Html;
+use humhub\helpers\Html;
+use humhub\modules\drawio\assets\Assets;
 
-\humhub\modules\drawio\assets\Assets::register($this);
+Assets::register($this);
 ?>
 
 <?= Html::beginTag('div', $options) ?>