Replace theme variables with CSS variables

humhub · Sep 12, 2024 · b0b8cf3 · b0b8cf3
1 parent 5e389c4
commit b0b8cf3
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 26 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -1,6 +1,10 @@
 Changelog
 =========
 
+1.6.4 (Unreleased)
+-----------------------
+- Enh #502: Replace theme variables with CSS variables
+
 1.6.3 (August 23, 2024)
 -----------------------
 - Fix #477: Hide the settings button when module is not available for a container

diff --git a/module.json b/module.json
@@ -3,7 +3,7 @@
     "name": "Calendar",
     "description": "Create one-time or recurring events, invite and manage attendees, and keep track of all your events with the Calendar module.",
     "keywords": ["calendar"],
-    "version": "1.6.3",
+    "version": "1.6.4",
     "humhub": {
         "minVersion": "1.16.1"
     },

diff --git a/views/view/index.php b/views/view/index.php
@@ -12,20 +12,19 @@
 /* @var $contentContainer ContentContainerActiveRecord */
 ?>
 <div class="panel panel-default">
-    <div class="panel-body" style="background-color:<?= $this->theme->variable('background-color-secondary') ?>">
+    <div class="panel-body" style="background-color: var(--background-color-secondary)">
         <?= CalendarFilterBar::widget([
             'filters' => $filters,
-            'showSelectors' => false
-            ]) ?>
+            'showSelectors' => false,
+        ]) ?>
     </div>
     <div class="panel-body">
         <?= FullCalendar::widget([
             'canWrite' => $canAddEntries,
             'loadUrl' => Url::toAjaxLoad($contentContainer),
             'contentContainer' => $contentContainer,
-            'aspectRatio' => ThemeHelper::isFluid() ? 2 : 1.7
-        ]);
-        ?>
+            'aspectRatio' => ThemeHelper::isFluid() ? 2 : 1.7,
+        ]) ?>
     </div>
 </div>
 

diff --git a/widgets/mails/views/eventInfoHtml.php b/widgets/mails/views/eventInfoHtml.php
@@ -10,9 +10,12 @@
 use humhub\modules\calendar\interfaces\participation\CalendarEventParticipationIF;
 use humhub\modules\calendar\models\CalendarDateFormatter;
 use humhub\modules\content\widgets\richtext\converter\RichTextToEmailHtmlConverter;
+use humhub\modules\ui\mail\DefaultMailStyle;
+use humhub\modules\ui\view\components\View;
 use humhub\widgets\mails\MailButton;
 use humhub\widgets\mails\MailButtonList;
 
+/* @var $this View */
 /* @var $event CalendarEventIF */
 /* @var $url string */
 /* @var $extraInfo string */
@@ -28,7 +31,7 @@
     <table width="100%" style="table-layout:fixed;" border="0" cellspacing="0" cellpadding="0" align="left">
         <tr>
             <td colspan="2"
-                style="word-wrap:break-word;padding-top:5px; padding-bottom:5px; font-size: 14px; line-height: 22px; font-family:Open Sans,Arial,Tahoma, Helvetica, sans-serif; color:<?= Yii::$app->view->theme->variable('text-color-main', '#777') ?>; font-weight:300; text-align:left;">
+                style="word-wrap:break-word;padding-top:5px; padding-bottom:5px; font-size: 14px; line-height: 22px; font-family:<?= $this->theme->variable('mail-font-family', DefaultMailStyle::DEFAULT_FONT_FAMILY) ?>; color:<?= $this->theme->variable('text-color-main', '#555') ?>; font-weight:300; text-align:left;">
 
                 <?php if (!empty($event->getTitle())): ?>
                     <h1><?= Html::encode($event->getTitle()) ?></h1>

diff --git a/widgets/views/calendarFilterBar.php b/widgets/views/calendarFilterBar.php
@@ -78,7 +78,7 @@
         <?php endif ?>
         <?php if ($showFilters) : ?>
             <div class="calendar-filters"
-                 style="<?= ($showSelectors) ? 'border-left:2px solid ' . $this->theme->variable('default') : '' ?>">
+                 style="<?= ($showSelectors) ? 'border-left:2px solid var(--default)' : '' ?>">
                 <div class="help-block" style="padding-left:10px;">
                     <?= Yii::t('CalendarModule.views_global_index', 'Filter events') ?>
                 </div>
@@ -104,7 +104,7 @@
         <?php endif ?>
         <?php if ($showTypes) : ?>
             <div class="calendar-types"
-                 style="width:300px;max-width:100%;<?= $showSelectors || $showFilters ? 'border-left:2px solid ' . $this->theme->variable('default') : '' ?>">
+                 style="width:300px;max-width:100%;<?= $showSelectors || $showFilters ? 'border-left:2px solid var(--default)' : '' ?>">
                 <div class="help-block" style="padding-left:10px;">
                     <?= Yii::t('CalendarModule.base', 'Filter by types') ?>
                 </div>

diff --git a/widgets/views/upcomingEvents.php b/widgets/views/upcomingEvents.php
@@ -1,16 +1,15 @@
 <?php
 
-use humhub\modules\calendar\interfaces\event\CalendarEventIF;
-use humhub\modules\calendar\models\CalendarDateFormatter;
+use humhub\libs\Helpers;
+use humhub\modules\calendar\models\CalendarEntry;
 use humhub\modules\ui\icon\widgets\Icon;
 use humhub\widgets\PanelMenu;
 use yii\helpers\Html;
-use humhub\libs\Helpers;
 
-/* @var $calendarEntries CalendarEventIF[] */
+/* @var $calendarEntries CalendarEntry[] */
 /* @var $calendarUrl string */
 
-$link = Html::a(Icon::get('arrow-circle-right').' '. Yii::t('CalendarModule.widgets_views_nextEvents', 'Open Calendar'), $calendarUrl);
+$link = Html::a(Icon::get('arrow-circle-right') . ' ' . Yii::t('CalendarModule.widgets_views_nextEvents', 'Open Calendar'), $calendarUrl);
 $extraMenus = Html::tag('li', $link);
 ?>
 <div class="panel calendar-upcoming-snippet" id="calendar-upcoming-events-snippet">
@@ -20,23 +19,20 @@
         <?= PanelMenu::widget(['id' => 'calendar-upcoming-events-snippet', 'extraMenus' => $extraMenus]) ?>
     </div>
 
-    <div class="panel-body" style="padding:0;">
+    <div class="panel-body" style="padding:0">
         <hr style="margin:0">
         <ul class="media-list">
             <?php foreach ($calendarEntries as $entry) : ?>
-                <?php $formatter = new CalendarDateFormatter(['calendarItem' => $entry]); ?>
-                <?php $color = ($entry->color) ? $entry->color : $this->theme->variable('info') ?>
                 <a href="<?= $entry->getUrl() ?>">
-                    <li style="border-left: 3px solid <?= Html::encode($color) ?>">
+                    <li style="border-left: 3px solid <?= Html::encode($entry->color ?: 'var(--info)') ?>">
                         <div class="media">
-                            <div class="media-body  text-break">
-                                <?=  $entry->getBadge() ?>
+                            <div class="media-body text-break">
+                                <?= $entry->getBadge() ?>
                                 <strong>
                                     <?= Helpers::trimText(Html::encode($entry->getTitle()), 60) ?>
                                 </strong>
-
-                                <br />
-                                <span class="time"><?= $formatter->getFormattedTime('medium') ?></span>
+                                <br>
+                                <span class="time"><?= $entry->formatter->getFormattedTime('medium') ?></span>
                             </div>
                         </div>
                     </li>
@@ -46,4 +42,3 @@
     </div>
 
 </div>
-
diff --git a/widgets/views/wallEntry.php b/widgets/views/wallEntry.php
@@ -15,7 +15,7 @@
 /* @var $collapse boolean */
 /* @var $this View */
 
-$color = $this->theme->variable('text-color-secondary');
+$color = 'var(--text-color-secondary)';
 ?>
 
 <div class="media event calendar-wall-entry" style="margin-top:20px;" data-action-component="calendar.CalendarEntry"