Skip to content

Commit 0e43e9f

Browse files
laviprlavipr
authored
Merge pull request #56 from fancyFranci/toggle-logo
Display logo size depending on sidebar menu toggle
2 parents 55b91b4 + b0d60d2 commit 0e43e9f

File tree

7 files changed

+152
-64
lines changed

7 files changed

+152
-64
lines changed

‎administrator/templates/atum/index.php‎

Lines changed: 49 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,28 @@
2323
$wa = $this->getWebAssetManager();
2424

2525
// Detecting Active Variables
26-
$option = $input->get('option', '');
27-
$view = $input->get('view', '');
28-
$layout = $input->get('layout', 'default');
29-
$task = $input->get('task', 'display');
30-
$itemid = $input->get('Itemid', '');
31-
$cpanel = $option === 'com_cpanel';
32-
$hidden = $app->input->get('hidemainmenu');
33-
$logo = $this->baseurl . '/templates/' . $this->template . '/images/logo.svg';
26+
$option = $input->get('option', '');
27+
$view = $input->get('view', '');
28+
$layout = $input->get('layout', 'default');
29+
$task = $input->get('task', 'display');
30+
$itemid = $input->get('Itemid', '');
31+
$cpanel = $option === 'com_cpanel';
32+
$hiddenMenu = $app->input->get('hidemainmenu');
33+
$joomlaLogo = $this->baseurl . '/templates/' . $this->template . '/images/logo.svg';
3434

3535
// Template params
36-
$siteLogo = $this->params->get('siteLogo', $this->baseurl . '/templates/' . $this->template . '/images/logo-joomla-blue.svg');
36+
$siteLogo = $this->params->get('siteLogo')
37+
? JUri::root() . $this->params->get('siteLogo')
38+
: $this->baseurl . '/templates/' . $this->template . '/images/logo-joomla-blue.svg';
39+
$smallLogo = $this->params->get('smallLogo')
40+
? JUri::root() . $this->params->get('smallLogo')
41+
: $this->baseurl . '/templates/' . $this->template . '/images/logo-blue.svg';
3742

3843
// Enable assets
3944
$wa->enableAsset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'));
4045

4146
// Load specific language related CSS
42-
HTMLHelper::_('stylesheet', 'administrator/language/' . $lang->getTag() . '/' . $lang->getTag() . '.css', array('version' => 'auto'));
47+
HTMLHelper::_('stylesheet', 'administrator/language/' . $lang->getTag() . '/' . $lang->getTag() . '.css', ['version' => 'auto']);
4348

4449
// Load specific template related JS
4550
HTMLHelper::_('script', 'media/templates/' . $this->template . '/js/template.min.js', ['version' => 'auto']);
@@ -72,20 +77,23 @@
7277

7378
$root[] = '--atum-bg-dark: #' . $bgcolor . ';';
7479

75-
try {
76-
$color = new Hex($bgcolor);
77-
$colorHsl=$color->toHsl();
78-
79-
$root[] = '--atum-contrast: ' . (clone $colorHsl)->lighten(-6)->spin(-30)->toHex() . ';';
80-
$root[] = '--atum-bg-dark-10: ' . (clone $colorHsl)->desaturate(86)->lighten(20.5)->spin(-6)->toHex() . ';';
81-
$root[] = '--atum-bg-dark-20: ' . (clone $colorHsl)->desaturate(76)->lighten(16.5)->spin(-6)->toHex() . ';';
82-
$root[] = '--atum-bg-dark-30: ' . (clone $colorHsl)->desaturate(60)->lighten(12)->spin(-5)->toHex() . ';';
83-
$root[] = '--atum-bg-dark-40: ' . (clone $colorHsl)->desaturate(41)->lighten(8)->spin(-3)->toHex() . ';';
84-
$root[] = '--atum-bg-dark-50: ' . (clone $colorHsl)->desaturate(19)->lighten(4)->spin(-1)->toHex() . ';';
85-
$root[] = '--atum-bg-dark-70: ' . (clone $colorHsl)->lighten(-6)->spin(4)->toHex() . ';';
86-
$root[] = '--atum-bg-dark-80: ' . (clone $colorHsl)->lighten(-11.5)->spin(7)->toHex() . ';';
87-
$root[] = '--atum-bg-dark-90: ' . (clone $colorHsl)->desaturate(1)->lighten(-17)->spin(10)->toHex() . ';';
88-
} catch (Exception $ex) {
80+
try
81+
{
82+
$color = new Hex($bgcolor);
83+
$colorHsl = $color->toHsl();
84+
85+
$root[] = '--atum-contrast: ' . (clone $colorHsl)->lighten(-6)->spin(-30)->toHex() . ';';
86+
$root[] = '--atum-bg-dark-10: ' . (clone $colorHsl)->desaturate(86)->lighten(20.5)->spin(-6)->toHex() . ';';
87+
$root[] = '--atum-bg-dark-20: ' . (clone $colorHsl)->desaturate(76)->lighten(16.5)->spin(-6)->toHex() . ';';
88+
$root[] = '--atum-bg-dark-30: ' . (clone $colorHsl)->desaturate(60)->lighten(12)->spin(-5)->toHex() . ';';
89+
$root[] = '--atum-bg-dark-40: ' . (clone $colorHsl)->desaturate(41)->lighten(8)->spin(-3)->toHex() . ';';
90+
$root[] = '--atum-bg-dark-50: ' . (clone $colorHsl)->desaturate(19)->lighten(4)->spin(-1)->toHex() . ';';
91+
$root[] = '--atum-bg-dark-70: ' . (clone $colorHsl)->lighten(-6)->spin(4)->toHex() . ';';
92+
$root[] = '--atum-bg-dark-80: ' . (clone $colorHsl)->lighten(-11.5)->spin(7)->toHex() . ';';
93+
$root[] = '--atum-bg-dark-90: ' . (clone $colorHsl)->desaturate(1)->lighten(-17)->spin(10)->toHex() . ';';
94+
}
95+
catch (Exception $ex)
96+
{
8997

9098
}
9199
}
@@ -113,11 +121,14 @@
113121

114122
$root[] = '--atum-link-color: #' . $linkcolor . ';';
115123

116-
try {
124+
try
125+
{
117126
$color = new Hex($linkcolor);
118127

119128
$root[] = '--atum-link-hover-color: ' . (clone $color)->darken(20) . ';';
120-
} catch (Exception $ex) {
129+
}
130+
catch (Exception $ex)
131+
{
121132

122133
}
123134
}
@@ -155,14 +166,17 @@
155166
<div class="d-flex align-items-center">
156167
<div class="header-title d-flex mr-auto">
157168
<div class="d-flex">
158-
<?php if (!$hidden) : ?>
169+
<?php // No home link in edit mode (so users can not jump out) and control panel (for a11y reasons) ?>
170+
<?php if ($hiddenMenu || $cpanel) : ?>
171+
<div class="logo">
172+
<img src="<?php echo $siteLogo; ?>" alt="">
173+
<img class="logo-small" src="<?php echo $smallLogo; ?>" alt="">
174+
</div>
175+
<?php else : ?>
159176
<a class="logo" href="<?php echo Route::_('index.php'); ?>"
160177
aria-label="<?php echo Text::_('TPL_BACK_TO_CONTROL_PANEL'); ?>">
161178
<img src="<?php echo $siteLogo; ?>" alt="">
162-
</a>
163-
<?php else : ?>
164-
<a class="logo">
165-
<img src="<?php echo $logoBlue; ?>" alt="">
179+
<img class="logo-small" src="<?php echo $smallLogo; ?>" alt="">
166180
</a>
167181
<?php endif; ?>
168182
</div>
@@ -175,14 +189,14 @@
175189
</header>
176190

177191
<?php // Wrapper ?>
178-
<div id="wrapper" class="d-flex wrapper<?php echo $hidden ? '0' : ''; ?>">
192+
<div id="wrapper" class="d-flex wrapper<?php echo $hiddenMenu ? '0' : ''; ?>">
179193

180194
<?php // Sidebar ?>
181-
<?php if (!$hidden) : ?>
182-
<div id="sidebar-wrapper" class="sidebar-wrapper" <?php echo $hidden ? 'data-hidden="' . $hidden . '"' : ''; ?>>
195+
<?php if (!$hiddenMenu) : ?>
196+
<div id="sidebar-wrapper" class="sidebar-wrapper" <?php echo $hiddenMenu ? 'data-hidden="' . $hiddenMenu . '"' : ''; ?>>
183197
<jdoc:include type="modules" name="menu" style="none"/>
184198
<div id="main-brand" class="main-brand d-flex align-items-center justify-content-center">
185-
<img src="<?php echo $logo; ?>" alt="">
199+
<img src="<?php echo $joomlaLogo; ?>" alt="">
186200
</div>
187201
</div>
188202
<?php endif; ?>

‎administrator/templates/atum/language/en-GB/en-GB.tpl_atum.ini‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ TPL_ATUM_LOGIN_SIDEBAR_VIEW_WEBSITE="view website"
2222
TPL_ATUM_LOGIN_SITE_TITLE="%s - Administrator Login"
2323
TPL_ATUM_MENU="MENU"
2424
TPL_ATUM_SITE_LOGO_LABEL="Site Logo"
25+
TPL_ATUM_SITE_LOGO_SMALL_LABEL="Small Site Logo"
2526
TPL_ATUM_SITENAME_LABEL="Site name"
2627
TPL_BACK_TO_CONTROL_PANEL="Back to Control Panel"
2728
TPL_ATUM_TOOLBAR="Toolbar"

‎administrator/templates/atum/login.php‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,13 @@
4646
$sitename = $app->get('sitename');
4747

4848
// Template params
49-
$siteLogo = $this->params->get('siteLogo', $this->baseurl . '/templates/' . $this->template . '/images/logo-joomla-blue.svg');
50-
$loginLogo = $this->params->get('loginLogo', $this->baseurl . '/templates/' . $this->template . '/images/logo-blue.svg');
49+
$siteLogo = $this->params->get('siteLogo')
50+
? JUri::root() . $this->params->get('siteLogo')
51+
: $this->params->get('siteLogo', $this->baseurl . '/templates/' . $this->template . '/images/logo-joomla-blue.svg');
52+
$loginLogo = $this->params->get('loginLogo')
53+
? JUri::root() . $this->params->get('loginLogo')
54+
: $this->params->get('loginLogo', $this->baseurl . '/templates/' . $this->template . '/images/logo-blue.svg');
55+
5156

5257
// Set some meta data
5358
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

‎administrator/templates/atum/scss/blocks/_header.scss‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
// Header
32

43
.header {
@@ -9,17 +8,35 @@
98
.logo {
109
display: inline-block;
1110
line-height: $header-height;
12-
text-align: center;
11+
width: $sidebar-width;
12+
transition: width .3s ease;
13+
14+
&.small {
15+
width: $sidebar-width-closed;
16+
transition: width .3s ease;
17+
18+
img:not(.logo-small) {
19+
display: none;
20+
}
21+
22+
img.logo-small {
23+
display: inline-block;
24+
}
25+
}
26+
1327
img {
1428
height: 1.3rem;
1529
margin-left: 0.8rem;
30+
max-width: calc(15.625rem - 0.8rem);
31+
32+
&.logo-small {
33+
display: none;
34+
}
1635
}
1736
}
1837

1938
.page-title {
20-
position: absolute;
21-
left: 16.35rem;
22-
margin: 0 5px;
39+
margin: 0 7.5px;
2340
font-size: 1.2rem;
2441
line-height: $header-height;
2542
color: var(--atum-special-color);
@@ -32,9 +49,11 @@
3249
.nav-item:hover,
3350
.nav-item.show {
3451
background-color: var(--atum-bg-dark);
35-
.nav-link{
36-
.fa{
37-
color:var(--atum-text-light);
52+
53+
.nav-link {
54+
color: var(--atum-text-light);
55+
.fa {
56+
color: var(--atum-text-light);
3857
}
3958
}
4059

@@ -46,7 +65,7 @@
4665
margin: 0 0.8rem;
4766
line-height: $header-height;
4867
min-width: $header-height - 0.3125rem;
49-
display:inline;
68+
display: inline;
5069

5170
.fa {
5271
width: 1.5rem;
@@ -69,7 +88,7 @@
6988
&:hover .fa {
7089
font-size: 1.3rem;
7190
transition: all .2s ease-in-out;
72-
color:var(--atum-text-light);
91+
color: var(--atum-text-light);
7392
}
7493
}
7594

@@ -113,7 +132,7 @@
113132
&:hover {
114133
color: var(--atum-text-light);
115134
text-decoration: none;
116-
background:var(--atum-bg-dark);
135+
background: var(--atum-bg-dark);
117136
}
118137

119138
.fa {
@@ -171,12 +190,9 @@
171190
}
172191

173192
.dropdown-header {
174-
padding-top: .5rem;
175-
padding-bottom: .5rem;
176193
color: $white;
177194
background-color: var(--atum-bg-dark);
178195
box-shadow: $atum-box-shadow;
179-
color: $white;
180196
font-size: inherit;
181197
padding: 1rem 0.75rem;
182198

@@ -203,7 +219,7 @@
203219
position: sticky;
204220
top: 0;
205221
width: 100%;
206-
z-index:9999;
222+
z-index: 9999;
207223

208224
> div {
209225
flex-direction: column;

‎administrator/templates/atum/templateDetails.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,11 @@
9898
type="media"
9999
label="TPL_ATUM_SITE_LOGO_LABEL"
100100
/>
101+
<field
102+
name="smallLogo"
103+
type="media"
104+
label="TPL_ATUM_SITE_LOGO_SMALL_LABEL"
105+
/>
101106

102107
<field
103108
name="loginLogo"

‎build/media_source/mod_menu/js/admin-menu.es6.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,13 @@
6262
menuToggleIcon.classList.remove('fa-toggle-off');
6363
menuToggleIcon.classList.add('fa-toggle-on');
6464
localStorage.setItem('atum-sidebar', 'open');
65+
Joomla.Event.dispatch('joomla:menu-toggle', 'open');
6566
} else {
6667
wrapper.classList.add('closed');
6768
menuToggleIcon.classList.remove('fa-toggle-on');
6869
menuToggleIcon.classList.add('fa-toggle-off');
6970
localStorage.setItem('atum-sidebar', 'closed');
71+
Joomla.Event.dispatch('joomla:menu-toggle', 'closed');
7072
}
7173
}
7274

@@ -111,13 +113,18 @@
111113
elem.classList.remove('child-open');
112114
}
113115

114-
// Save the sidebar state
115-
if (Joomla.localStorageEnabled()) {
116-
if (wrapper.classList.contains('closed')) {
116+
// Save the sidebar state and dispatch event
117+
const storageEnabled = Joomla.localStorageEnabled();
118+
if (wrapper.classList.contains('closed')) {
119+
if (storageEnabled) {
117120
localStorage.setItem('atum-sidebar', 'closed');
118-
} else {
121+
}
122+
Joomla.Event.dispatch('joomla:menu-toggle', 'closed');
123+
} else {
124+
if (storageEnabled) {
119125
localStorage.setItem('atum-sidebar', 'open');
120126
}
127+
Joomla.Event.dispatch('joomla:menu-toggle', 'open');
121128
}
122129
});
123130

@@ -171,6 +178,8 @@
171178
menuItem.classList.add('open');
172179
}
173180
}
181+
182+
Joomla.Event.dispatch('joomla:menu-toggle', 'open');
174183
};
175184

176185
menuParents.forEach((parent) => {

0 commit comments

Comments
 (0)