From 4ccf0a1012a3aa337906fff0dffdf98d26d3dd9e Mon Sep 17 00:00:00 2001
From: "michael.danielczok" <michael@pcsg.de>
Date: Wed, 7 Jun 2023 13:30:04 +0200
Subject: [PATCH] feat: Currency Switch use the reworked version of
package/quiqqer/currency/bin/controls/Switch quiqqer/template-cologne#86
---
bin/css/style.css | 32 +++++
.../Controls/CurrencySwitch.css | 120 ++----------------
.../Controls/CurrencySwitch.html | 21 +--
.../Controls/CurrencySwitch.php | 30 ++---
4 files changed, 64 insertions(+), 139 deletions(-)
diff --git a/bin/css/style.css b/bin/css/style.css
index d3384f6..c217502 100644
--- a/bin/css/style.css
+++ b/bin/css/style.css
@@ -607,6 +607,7 @@ a.toTop:before {
/******************************/
.topbar-right > .quiqqer-bricks-languageswitch-dropdown {
height: 100%;
+ flex-shrink: 0;
}
/*
@@ -620,6 +621,37 @@ a.toTop:before {
height: 100%;
}
+.quiqqer-control-languageswitch-dropdown-dd-entry:hover {
+ color: inherit;
+}
+
+.quiqqer-control-languageswitch-dropdown-dd {
+ box-shadow: 0 7px 22px -5px rgba(48, 60, 72, 0.2);
+}
+
+/*******************/
+/* Currency switch */
+/*******************/
+/*
+1. because `.cologne-header` has z-index 99, we must set this control to 100
+*/
+.topbar-right .quiqqer-currency-switch {
+ z-index: 100; /* 1 */
+ height: 100%;
+ display: flex;
+ align-items: center;
+ padding-right: 0.5em;
+ position: relative;
+}
+
+.quiqqer-currency-switch-dd {
+ box-shadow: 0 7px 22px -5px rgba(48, 60, 72, 0.2);
+}
+
+.quiqqer-currency-switch-sign {
+ font-size: 1.2rem;
+}
+
/***************************/
/* template product search */
/***************************/
diff --git a/src/QUI/TemplateCologne/Controls/CurrencySwitch.css b/src/QUI/TemplateCologne/Controls/CurrencySwitch.css
index 85fa4fb..b4f9bac 100644
--- a/src/QUI/TemplateCologne/Controls/CurrencySwitch.css
+++ b/src/QUI/TemplateCologne/Controls/CurrencySwitch.css
@@ -1,115 +1,23 @@
-.currency-switch {
- align-items: center;
- display: inline-flex;
- height: 100%;
- position: relative;
-}
-
-.lcs-button {
- cursor: pointer;
- white-space: nowrap;
-}
-
-.lcs-button.lcs-button__no-hover {
+/**********/
+/* button */
+/**********/
+.quiqqer-currency-switch-display.placeholder {
+ opacity: 0.5;
cursor: default;
}
-.lcs-button.lcs-button__no-hover:hover {
- color: inherit;
-}
-
-.lcs-button.lcs-button__no-hover:hover .lcs-button-currency-code.text-muted {
- color: #9ba3ad;
-}
-
-.lcs-button.lcs-button__no-hover .fa {
- display: none;
-}
-
-.lcs-button-flag {
- border-right: 1px solid #ddd;
- padding: 0 1rem;
-}
-
-.lcs-button-currency {
- font-weight: 300;
- margin: 0 1rem;
-}
-
-.lcs-button-currency-sign {
-
-}
-
-/* loader */
-.qui-loader-inner > div {
- align-items: center;
- display: flex;
- justify-content: center;
-}
-
-.qui-loader-inner .qui-loader-inner-fa-circle-o-notch .fa-spin,
-.qui-loader-inner .qui-loader-inner-fa-gear .fa-spin,
-.qui-loader-inner .qui-loader-inner-fa-refresh .fa-spin,
-.qui-loader-inner .qui-loader-inner-fa-spinner .fa-spin {
- font-size: 1.5rem;
- position: initial;
- top: 0;
-}
-
-/********/
-/* menu */
-/********/
-.lcs-menu-wrapper {
- bottom: 0;
- position: absolute;
- right: 0;
-}
-
-.lcs-menu {
- background: #fff;
- border: 1px solid rgb(221, 221, 221);
- box-shadow: 0 7px 22px -5px rgba(48, 60, 72, 0.2);
- min-width: 200px;
- padding: 16px 20px;
+/* custom loader */
+.quiqqer-currency-switch-customLoader {
position: absolute;
- right: 0;
- z-index: 1001;
-}
-
-.lcs-menu:focus {
- border: 1px solid red !important;
-}
-
-/* currency */
-.lcs-menu .quiqqer-currency-switch {
- border: 1px solid #ddd;
- border-radius: 0.25rem;
- display: flex;
- float: none;
- position: relative;
- /*line-height: 40px;*/
- /*height: 40px;*/
-}
-
-.quiqqer-currency-switch.button {
- align-items: center;
- display: flex;
- padding: 0 10px;
- width: 100%;
-}
-
-.quiqqer-currency-switch .quiqqer-currency-switch-arrow {
- margin-left: auto;
- position: initial;
+ font-size: 1.5em;
+ left: calc(50% - 0.75em);
}
-/* currency */
-.quiqqer-currency-switch-dd {
- border: 1px solid rgb(221, 221, 221) !important;
- box-shadow: 0 7px 22px -5px rgba(48, 60, 72, 0.2) !important;
- display: none;
+/* styling from: packages/quiqqer/currency/bin/controls/Switch.css to avoid jumping effect */
+.quiqqer-currency-switch-sign.placeholder {
+ margin-right: 0.5em;
}
-.quiqqer-currency-switch-dd:after {
- display: none;
+.quiqqer-currency-switch-display.placeholder {
+ display: inline;
}
\ No newline at end of file
diff --git a/src/QUI/TemplateCologne/Controls/CurrencySwitch.html b/src/QUI/TemplateCologne/Controls/CurrencySwitch.html
index 3d44579..cf19454 100644
--- a/src/QUI/TemplateCologne/Controls/CurrencySwitch.html
+++ b/src/QUI/TemplateCologne/Controls/CurrencySwitch.html
@@ -1,14 +1,7 @@
-<div class="lcs-button">
- {if $currencySwitch}
- <span class="lcs-button-currency" title="{$DefaultCurrency->getText()}">
- <span class="lcs-button-currency-sign">{$DefaultCurrency->getSign()}</span>
- <span class="lcs-button-currency-code text-muted">{$DefaultCurrency->getCode()}</span>
- </span>
- {/if}
-
- {if $enableChange}
- <span class="fa fa-caret-down"></span>
- {/if}
-</div>
-
-<div class="lcs-menu-wrapper"></div>
\ No newline at end of file
+{strip}
+ <div class="quiqqer-currency-switch-display placeholder" title="{$DefaultCurrency->getText()}">
+ <span class="quiqqer-currency-switch-sign placeholder">{$DefaultCurrency->getSign()}</span>
+ <span class="quiqqer-currency-switch-code placeholder">{$DefaultCurrency->getCode()}</span>
+ </div>
+{* <span class="fa fa-spinner fa-pulse fa-fw quiqqer-currency-switch-customLoader"></span>*}
+{/strip}
\ No newline at end of file
diff --git a/src/QUI/TemplateCologne/Controls/CurrencySwitch.php b/src/QUI/TemplateCologne/Controls/CurrencySwitch.php
index 7ea2384..e447122 100644
--- a/src/QUI/TemplateCologne/Controls/CurrencySwitch.php
+++ b/src/QUI/TemplateCologne/Controls/CurrencySwitch.php
@@ -21,12 +21,11 @@ class CurrencySwitch extends QUI\Control
public function __construct($attributes = [])
{
$this->setAttributes([
- 'class' => 'currency-switch',
-// 'data-qui' => 'package/quiqqer/template-cologne/bin/javascript/controls/CurrencySwitch',
+ 'class' => 'quiqqer-currency-switch',
'userRelatedCurrency' => 1, // 1 / 0 -> is user allowed to change currency?
]);
- $this->addCSSFile(dirname(__FILE__) . '/CurrencySwitch.css');
+ $this->addCSSFile(dirname(__FILE__).'/CurrencySwitch.css');
parent::__construct($attributes);
}
@@ -40,32 +39,27 @@ public function __construct($attributes = [])
*/
public function getBody()
{
- $Engine = QUI::getTemplateManager()->getEngine();
- $enableChange = false;
+ $Engine = QUI::getTemplateManager()->getEngine();
- // is user allowed to change currency?
- $currencySwitch = false;
- $userrelatedcurrency = 0;
+ $this->setJavaScriptControlOption('buttonshowsign', 1);
+ $this->setJavaScriptControlOption('dropdownshowsign', 1);
+ $this->setJavaScriptControlOption('showarrow', 0);
+ $this->setJavaScriptControlOption('showloader', 0);
+ $this->setJavaScriptControlOption('dropdownposition', 'right');
+ // is user allowed to change currency?
if ($this->isCurrencySwitchAllowed()) {
try {
$Package = QUI::getPackage('quiqqer/erp');
$Config = $Package->getConfig();
if ($Config->getValue('general', 'userRelatedCurrency')) {
- $userrelatedcurrency = 1;
- $currencySwitch = true;
+ $this->setJavaScriptControl('package/quiqqer/currency/bin/controls/Switch');
}
} catch (QUI\Exception $Exception) {
QUI\System\Log::writeException($Exception);
}
}
- $this->setJavaScriptControlOption('userrelatedcurrency', $userrelatedcurrency);
-
-
- if ($currencySwitch) {
- $enableChange = true;
- }
$Currency = QUI\ERP\Currency\Handler::getDefaultCurrency();
@@ -75,12 +69,10 @@ public function getBody()
$Engine->assign([
'this' => $this,
- 'currencySwitch' => $currencySwitch,
'DefaultCurrency' => $Currency,
- 'enableChange' => $enableChange
]);
- return $Engine->fetch(dirname(__FILE__) . '/CurrencySwitch.html');
+ return $Engine->fetch(dirname(__FILE__).'/CurrencySwitch.html');
}
/**
--
GitLab