TheRON/core
1
0
Fork 0
mirror of https://framagit.org/hubzilla/core.git synced 2026-06-21 00:52:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

redbasic: implement setting for always light navbar icons and some minor fixes

Browse Source
This commit is contained in:
Mario
2023-01-26 18:28:40 +00:00
parent 60c968222f
commit 79b40179b4
6 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
include/nav.php
View File

@@ -319,6 +319,8 @@ function nav($template = 'default') {
App::$page['nav'] .= replace_macros($tpl, [ App::$page['nav'] .= replace_macros($tpl, [
'$baseurl' => z_root(), '$baseurl' => z_root(),
'$color_mode' => App::$page['color_mode'] ?? '',
'$navbar_color_mode' => App::$page['navbar_color_mode'] ?? '',
'$theme_switch_icon' => $theme_switch_icon, '$theme_switch_icon' => $theme_switch_icon,
'$fulldocs' => t('Help'), '$fulldocs' => t('Help'),
'$sitelocation' => $sitelocation, '$sitelocation' => $sitelocation,

26
view/theme/redbasic/js/redbasic.js
View File

@@ -5,13 +5,11 @@
let redbasic_dark_mode = localStorage.getItem('redbasic_dark_mode'); let redbasic_dark_mode = localStorage.getItem('redbasic_dark_mode');
let redbasic_theme_color = localStorage.getItem('redbasic_theme_color'); let redbasic_theme_color = localStorage.getItem('redbasic_theme_color');
if (redbasic_dark_mode) { if (redbasic_dark_mode === 1) {
$('html').attr('data-bs-theme', 'dark'); $('html').attr('data-bs-theme', 'dark');
$('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
} }
else { if (redbasic_dark_mode === 0) {
$('html').attr('data-bs-theme', 'light'); $('html').attr('data-bs-theme', 'light');
$('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o');
} }
@@ -21,6 +19,15 @@ if (redbasic_theme_color) {
$(document).ready(function() { $(document).ready(function() {
if (redbasic_dark_mode === 1) {
$('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
$('[data-bs-theme="light"]').attr('data-bs-theme', 'dark');
}
if (redbasic_dark_mode === 0) {
$('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o');
$('[data-bs-theme="dark"]:not(nav)').attr('data-bs-theme', 'light');
}
if (redbasic_theme_color != $('nav').css('background-color')) { if (redbasic_theme_color != $('nav').css('background-color')) {
$('meta[name=theme-color]').attr('content', $('nav').css('background-color')); $('meta[name=theme-color]').attr('content', $('nav').css('background-color'));
localStorage.setItem('redbasic_theme_color', $('nav').css('background-color')); localStorage.setItem('redbasic_theme_color', $('nav').css('background-color'));
@@ -65,12 +72,17 @@ $(document).ready(function() {
$('#theme-switch').click(function() { $('#theme-switch').click(function() {
if ($('html').attr('data-bs-theme') === 'dark') { if ($('html').attr('data-bs-theme') === 'dark') {
$('html').attr('data-bs-theme', 'light'); if ($('nav').data('bs-theme') === 'dark') {
localStorage.removeItem('redbasic_dark_mode'); $('[data-bs-theme="dark"]:not(nav)').attr('data-bs-theme', 'light');
}
else {
$('[data-bs-theme="dark"]').attr('data-bs-theme', 'light');
}
localStorage.setItem('redbasic_dark_mode', 0);
$('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o'); $('#theme-switch-icon').removeClass('fa-sun-o').addClass('fa-moon-o');
} }
else { else {
$('html').attr('data-bs-theme', 'dark'); $('[data-bs-theme="light"]').attr('data-bs-theme', 'dark');
localStorage.setItem('redbasic_dark_mode', 1); localStorage.setItem('redbasic_dark_mode', 1);
$('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o'); $('#theme-switch-icon').removeClass('fa-moon-o').addClass('fa-sun-o');
} }

3
view/theme/redbasic/php/config.php
View File

@@ -38,6 +38,7 @@ class RedbasicConfig {
$arr = array(); $arr = array();
$arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode'); $arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode');
$arr['navbar_dark_mode'] = get_pconfig(local_channel(),'redbasic', 'navbar_dark_mode');
$arr['narrow_navbar'] = get_pconfig(local_channel(),'redbasic', 'narrow_navbar' ); $arr['narrow_navbar'] = get_pconfig(local_channel(),'redbasic', 'narrow_navbar' );
$arr['nav_bg'] = get_pconfig(local_channel(),'redbasic', 'nav_bg' ); $arr['nav_bg'] = get_pconfig(local_channel(),'redbasic', 'nav_bg' );
$arr['nav_bg_dark'] = get_pconfig(local_channel(),'redbasic', 'nav_bg_dark' ); $arr['nav_bg_dark'] = get_pconfig(local_channel(),'redbasic', 'nav_bg_dark' );
@@ -65,6 +66,7 @@ class RedbasicConfig {
if (isset($_POST['redbasic-settings-submit'])) { if (isset($_POST['redbasic-settings-submit'])) {
set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']); set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']);
set_pconfig(local_channel(), 'redbasic', 'navbar_dark_mode', $_POST['redbasic_navbar_dark_mode']);
set_pconfig(local_channel(), 'redbasic', 'dark_mode', $_POST['redbasic_dark_mode']); set_pconfig(local_channel(), 'redbasic', 'dark_mode', $_POST['redbasic_dark_mode']);
set_pconfig(local_channel(), 'redbasic', 'nav_bg', $_POST['redbasic_nav_bg']); set_pconfig(local_channel(), 'redbasic', 'nav_bg', $_POST['redbasic_nav_bg']);
set_pconfig(local_channel(), 'redbasic', 'nav_bg_dark', $_POST['redbasic_nav_bg_dark']); set_pconfig(local_channel(), 'redbasic', 'nav_bg_dark', $_POST['redbasic_nav_bg_dark']);
@@ -99,6 +101,7 @@ class RedbasicConfig {
'$expert' => $expert, '$expert' => $expert,
'$title' => t("Theme settings"), '$title' => t("Theme settings"),
'$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))), '$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))),
'$navbar_dark_mode' => array('redbasic_navbar_dark_mode',t('Always use light icons for navbar'),$arr['navbar_dark_mode'], t('Enable this option if you use a dark navbar color in light mode'), array(t('No'),t('Yes'))),
'$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))), '$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))),
'$nav_bg' => array('redbasic_nav_bg', t('Navigation bar background color'), $arr['nav_bg']), '$nav_bg' => array('redbasic_nav_bg', t('Navigation bar background color'), $arr['nav_bg']),
'$nav_bg_dark' => array('redbasic_nav_bg_dark', t('Dark navigation bar background color'), $arr['nav_bg_dark']), '$nav_bg_dark' => array('redbasic_nav_bg_dark', t('Dark navigation bar background color'), $arr['nav_bg_dark']),

5
view/theme/redbasic/php/theme.php
View File

@@ -18,18 +18,23 @@ use App;
function redbasic_init(&$a) { function redbasic_init(&$a) {
$mode = ''; $mode = '';
$navbar_mode = '';
if (local_channel()) { if (local_channel()) {
$mode = ((get_pconfig(local_channel(), 'redbasic', 'dark_mode')) ? 'dark' : 'light'); $mode = ((get_pconfig(local_channel(), 'redbasic', 'dark_mode')) ? 'dark' : 'light');
$navbar_mode = ((get_pconfig(local_channel(), 'redbasic', 'navbar_dark_mode')) ? 'dark' : 'light');
} }
if (App::$profile_uid) { if (App::$profile_uid) {
$mode = ((get_pconfig(App::$profile_uid, 'redbasic', 'dark_mode')) ? 'dark' : 'light'); $mode = ((get_pconfig(App::$profile_uid, 'redbasic', 'dark_mode')) ? 'dark' : 'light');
$navbar_mode = ((get_pconfig(App::$profile_uid, 'redbasic', 'navbar_dark_mode')) ? 'dark' : 'light');
} }
if (!$mode) { if (!$mode) {
$mode = ((get_config('redbasic', 'dark_mode')) ? 'dark' : 'light'); $mode = ((get_config('redbasic', 'dark_mode')) ? 'dark' : 'light');
$navbar_mode = ((get_config('redbasic', 'navbar_dark_mode')) ? 'dark' : 'light');
} }
App::$page['color_mode'] = 'data-bs-theme="' . $mode . '"'; App::$page['color_mode'] = 'data-bs-theme="' . $mode . '"';
App::$page['navbar_color_mode'] = (($navbar_mode === 'dark') ? 'data-bs-theme="' . $navbar_mode . '"' : '');
} }

4
view/theme/redbasic/tpl/theme_settings.tpl
View File

@@ -6,6 +6,7 @@
{{if $expert}} {{if $expert}}
<h3>Light</h3> <h3>Light</h3>
{{include file="field_checkbox.tpl" field=$navbar_dark_mode}}
{{include file="field_colorinput.tpl" field=$nav_bg}} {{include file="field_colorinput.tpl" field=$nav_bg}}
{{include file="field_colorinput.tpl" field=$bgcolor}} {{include file="field_colorinput.tpl" field=$bgcolor}}
{{include file="field_colorinput.tpl" field=$background_image}} {{include file="field_colorinput.tpl" field=$background_image}}
@@ -26,8 +27,7 @@
<script> <script>
$(function(){ $(function(){
$('#id_redbasic_nav_bg, #id_redbasic_nav_bg_dark').colorpicker({format: 'rgba'}); $('#id_redbasic_link_color, #id_redbasic_link_color_dark, #id_redbasic_link_hover_color, #id_redbasic_link_hover_color_dark, #id_redbasic_background_color, #id_redbasic_background_color_dark, #id_redbasic_nav_bg, #id_redbasic_nav_bg_dark').colorpicker({format: 'rgba'});
$('#id_redbasic_link_color, #id_redbasic_link_color_dark, #id_redbasic_link_hover_color, #id_redbasic_link_hover_color_dark, #id_redbasic_background_color, #id_redbasic_background_color_dark').colorpicker();
}); });
</script> </script>
{{/if}} {{/if}}

8
view/tpl/navbar_default.tpl
View File

@@ -1,4 +1,4 @@
<nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary"> <nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary" {{$navbar_color_mode}}>
<div class="container-fluid flex-nowrap"> <div class="container-fluid flex-nowrap">
{{if $userinfo}} {{if $userinfo}}
<div class="d-flex" style="max-width: 50%"> <div class="d-flex" style="max-width: 50%">
@@ -8,7 +8,7 @@
<i class="navbar-text fa fa-caret-down"></i> <i class="navbar-text fa fa-caret-down"></i>
</div> </div>
{{if $is_owner}} {{if $is_owner}}
<div class="dropdown-menu"> <div class="dropdown-menu" {{$color_mode}}>
{{foreach $nav.usermenu as $usermenu}} {{foreach $nav.usermenu as $usermenu}}
<a class="dropdown-item{{if $usermenu.2}} active{{/if}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}" role="menuitem" id="{{$usermenu.4}}">{{$usermenu.1}}</a> <a class="dropdown-item{{if $usermenu.2}} active{{/if}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}" role="menuitem" id="{{$usermenu.4}}">{{$usermenu.1}}</a>
{{/foreach}} {{/foreach}}
@@ -116,7 +116,7 @@
<div class="navbar-text navbar-banner">{{$banner}}</div> <div class="navbar-text navbar-banner">{{$banner}}</div>
<ul id="nav-right" class="navbar-nav"> <ul id="nav-right" class="navbar-nav">
<li class="nav-item collapse clearfix" id="nav-search"> <li class="nav-item collapse clearfix" id="nav-search" {{$color_mode}}>
<form class="form-inline" method="get" action="{{$nav.search.4}}" role="search"> <form class="form-inline" method="get" action="{{$nav.search.4}}" role="search">
<input class="form-control form-control-sm mt-1 me-2" id="nav-search-text" type="text" value="" placeholder="{{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();" onblur="closeMenu('nav-search'); openMenu('nav-search-btn');"/> <input class="form-control form-control-sm mt-1 me-2" id="nav-search-text" type="text" value="" placeholder="{{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();" onblur="closeMenu('nav-search'); openMenu('nav-search-btn');"/>
</form> </form>
@@ -134,7 +134,7 @@
{{/if}} {{/if}}
{{if $localuser || $nav.pubs}} {{if $localuser || $nav.pubs}}
<li id="notifications-btn" class="nav-item d-xl-none"> <li id="notifications-btn" class="nav-item d-xl-none">
<a class="nav-link text-white notifications-btn" href="#"><i id="notifications-btn-icon" class="fa fa-exclamation-circle notifications-btn-icon"></i></a> <a class="nav-link notifications-btn" href="#"><i id="notifications-btn-icon" class="fa fa-exclamation-circle notifications-btn-icon"></i></a>
</li> </li>
{{/if}} {{/if}}
{{if $navbar_apps}} {{if $navbar_apps}}