mirror of
https://github.com/snipe/snipe-it.git
synced 2026-02-04 16:25:39 +00:00
Merge pull request #18347 from grokability/added-reset-for-theme
Added reset for theme, preview for effects in profile
This commit is contained in:
snipe
GitHub
@ -97,11 +97,7 @@ return new class extends Migration
|
||||
'link_dark_color' => $link_dark_color,
|
||||
'nav_link_color' => $nav_color,
|
||||
'header_color' => $header_color]);
|
||||
|
||||
DB::table('users')->whereNull('skin')->update([
|
||||
'link_light_color' => $link_light_color,
|
||||
'link_dark_color' => $link_dark_color,
|
||||
'nav_link_color' => $nav_color]);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -41,6 +41,9 @@ return [
|
||||
'backups_logged_out' => 'All existing users, including you, will be logged out once your restore is complete.',
|
||||
'backups_large' => 'Very large backups may time out on the restore attempt and may still need to be run via command line. ',
|
||||
'barcode_settings' => 'Barcode Settings',
|
||||
'color_preferences' => 'Color & Theme Settings',
|
||||
'color_settings_help' => 'These settings will be used throughout Snipe-IT. Users are able to override the link colors by editing their account preferences to meet their individual readability requirements.',
|
||||
'color_reset' => 'Reset to Default',
|
||||
'confirm_purge' => 'Confirm Purge',
|
||||
'confirm_purge_help' => 'Enter the text "DELETE" in the box below to purge your deleted records. This action cannot be undone and will PERMANENTLY delete all soft-deleted items and users. (You should make a backup first, just to be safe.)',
|
||||
'custom_css' => 'Custom CSS',
|
||||
|
||||
@ -540,7 +540,8 @@ return [
|
||||
'light_mode' => 'Light Mode',
|
||||
'dark_mode' => 'Dark Mode',
|
||||
'light_dark' => 'Light/Dark Mode',
|
||||
'system_default' => 'Use System Default',
|
||||
'system_default' => 'Use System Settings',
|
||||
'system_default_help' => 'This will reset your light/dark mode preferences to use the defaults set in your computer operating system preferences.',
|
||||
'theme' => 'Theme',
|
||||
'error_user_company' => 'Checkout target company and asset company do not match',
|
||||
'error_user_company_multiple' => 'One or more of the checkout target company and asset company do not match',
|
||||
|
||||
@ -71,10 +71,15 @@
|
||||
<label class="col-md-3 control-label" for="locale">{{ trans('general.light_dark') }}</label>
|
||||
<div class="col-md-9">
|
||||
<p class="form-control-static" style="padding-top: 7px;">
|
||||
<a data-theme-toggle-clear class="btn btn-default btn-sm" href="{{ route('profile') }}">
|
||||
<a data-theme-toggle-clear class="btn btn-theme btn-sm" href="{{ route('profile') }}">
|
||||
{{ trans('general.system_default') }}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p class="help-block">
|
||||
{{ trans('general.system_default_help') }}
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -82,7 +87,7 @@
|
||||
<div class="form-group">
|
||||
<div class="col-md-9 col-md-offset-3">
|
||||
<label class="form-control">
|
||||
<input type="checkbox" name="enable_sounds" value="1" {{ old('enable_sounds', $user->enable_sounds) ? 'checked' : '' }}>
|
||||
<input type="checkbox" id="enable_sounds" name="enable_sounds" value="1" {{ old('enable_sounds', $user->enable_sounds) ? 'checked' : '' }}>
|
||||
{{ trans('account/general.enable_sounds') }}
|
||||
</label>
|
||||
</div>
|
||||
@ -91,7 +96,7 @@
|
||||
<div class="form-group">
|
||||
<div class="col-md-9 col-md-offset-3">
|
||||
<label class="form-control">
|
||||
<input type="checkbox" name="enable_confetti" value="1" {{ old('enable_confetti', $user->enable_confetti) ? 'checked' : '' }}>
|
||||
<input type="checkbox" name="enable_confetti" id="enable_confetti" value="1" {{ old('enable_confetti', $user->enable_confetti) ? 'checked' : '' }}>
|
||||
{{ trans('account/general.enable_confetti') }}
|
||||
</label>
|
||||
</div>
|
||||
@ -264,6 +269,47 @@
|
||||
localStorage.removeItem("theme");
|
||||
});
|
||||
|
||||
$('#enable_sounds').on("click",function () {
|
||||
if ($('#enable_sounds').is(":checked")) {
|
||||
var audio = new Audio('{{ config('app.url') }}/sounds/success.mp3');
|
||||
audio.play();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('#enable_confetti').on("click",function () {
|
||||
if ($('#enable_confetti').is(":checked")) {
|
||||
var duration = 1500;
|
||||
var animationEnd = Date.now() + duration;
|
||||
var defaults = {startVelocity: 30, spread: 360, ticks: 60, zIndex: 0};
|
||||
|
||||
function randomInRange(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
var interval = setInterval(function () {
|
||||
var timeLeft = animationEnd - Date.now();
|
||||
|
||||
if (timeLeft <= 0) {
|
||||
return clearInterval(interval);
|
||||
}
|
||||
|
||||
var particleCount = 50 * (timeLeft / duration);
|
||||
// since particles fall down, start a bit higher than random
|
||||
confetti({
|
||||
...defaults,
|
||||
particleCount,
|
||||
origin: {x: randomInRange(0.1, 0.3), y: Math.random() - 0.2}
|
||||
});
|
||||
confetti({
|
||||
...defaults,
|
||||
particleCount,
|
||||
origin: {x: randomInRange(0.7, 0.9), y: Math.random() - 0.2}
|
||||
});
|
||||
}, 250);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#nav-link-color').colorpicker().on('changeColor', function(e) {
|
||||
|
||||
@ -50,9 +50,9 @@
|
||||
--main-footer-bg-color: light-dark(#ffffff,#3d4144);
|
||||
--main-footer-text-color: light-dark(#605e5e, #d2d6de);
|
||||
--main-footer-top-border-color: light-dark(#d2d6de,#605e5e);
|
||||
--main-theme-color: {{ $snipeSettings->header_color ?? '#5fa4cc' }};
|
||||
--nav-hover-text-color: {{ $nav_link_color ?? 'light-dark(hsl(from var(--main-theme-color) h s calc(l - 10)),hsl(from var(--main-theme-color) h s calc(l - 10)))' }};
|
||||
--nav-primary-text-color: {{ $nav_link_color ?? 'light-dark(hsl(from var(--main-theme-color) h s calc(l - 10)),hsl(from var(--main-theme-color) h s calc(l - 10)))' }};
|
||||
--main-theme-color: {{ $snipeSettings->header_color ?? '#3c8dbc' }};
|
||||
--nav-hover-text-color: {{ $nav_link_color ?? 'hsl(from var(--main-theme-color) h s calc(l - 10))' }};
|
||||
--nav-primary-text-color: {{ $nav_link_color ?? '#ffffff' }};
|
||||
--search-highlight: #e9d15b;
|
||||
--sidenav-hover-color-bg: #4c4b4b;
|
||||
--sidenav-text-hover-color: #fff;
|
||||
@ -63,7 +63,7 @@
|
||||
--table-stripe-bg-alt: light-dark(rgba(211, 211, 211, 0.25), #323131);
|
||||
--table-stripe-bg: light-dark(#ffffff, #494747);
|
||||
--text-danger: light-dark(#a94442, #fa5b48);
|
||||
--text-help: light-dark(#605e5e,#a6a4a4);
|
||||
--text-help: light-dark(#777676,#a6a4a4);
|
||||
--text-info: light-dark(#31708f,#2baae6);
|
||||
--text-success: light-dark(#039516,#4ced61);
|
||||
--text-warning: light-dark(#da9113,#f3a51f);
|
||||
@ -672,7 +672,7 @@
|
||||
|
||||
|
||||
.help-block {
|
||||
color: var(--text-help);
|
||||
color: var(--text-help) !important;
|
||||
}
|
||||
|
||||
.alert-msg,
|
||||
|
||||
@ -72,6 +72,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset name="color-preferences">
|
||||
<x-form-legend help_text="{!! trans('admin/settings/general.color_settings_help') !!}">
|
||||
{{ trans('admin/settings/general.color_preferences') }}
|
||||
</x-form-legend>
|
||||
|
||||
<!-- Header color -->
|
||||
<div class="form-group {{ $errors->has('header_color') ? 'error' : '' }}">
|
||||
<label for="header_color" class="col-md-3 control-label">{{ trans('admin/settings/general.header_color') }}</label>
|
||||
@ -86,7 +91,7 @@
|
||||
<div class="form-group {{ $errors->has('nav_link_color') ? 'error' : '' }}">
|
||||
<label for="nav_link_color" class="col-md-3 control-label">{{ trans('admin/settings/general.nav_link_color') }}</label>
|
||||
<div class="col-md-9">
|
||||
<x-input.colorpicker :item="$setting" placeholder="#ffffff" div_id="nav-link-color" id="nav-link-color" :value="old('nav_link_color', ($setting->nav_link_color ?? '#ffffff'))" name="nav_link_color" />
|
||||
<x-input.colorpicker :item="$setting" placeholder="#ffffff" div_id="nav-link-color" id="nav_link_color" :value="old('nav_link_color', ($setting->nav_link_color ?? '#ffffff'))" name="nav_link_color" />
|
||||
{!! $errors->first('nav_link_color', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
|
||||
<p class="help-block">{{ trans('admin/settings/general.nav_link_color_help') }}</p>
|
||||
</div>
|
||||
@ -112,6 +117,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="col-md-9 col-md-offset-3">
|
||||
<p class="form-control-static" style="padding-top: 7px;">
|
||||
<a data-theme-toggle-clear class="btn btn-default btn-sm" onClick(return false;);>
|
||||
{{ trans('admin/settings/general.color_reset') }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset name="logo-preferences">
|
||||
<x-form-legend>
|
||||
{{ trans('admin/settings/general.legends.logos') }}
|
||||
@ -269,7 +285,7 @@
|
||||
</fieldset>
|
||||
<!-- colors and skins -->
|
||||
|
||||
<fieldset name="color-preferences">
|
||||
<fieldset name="css-preferences">
|
||||
<x-form-legend>
|
||||
{{ trans('admin/settings/general.custom_css') }}
|
||||
</x-form-legend>
|
||||
@ -439,6 +455,7 @@
|
||||
|
||||
// This takes the color from the color picker to show a live preview
|
||||
$(function() {
|
||||
|
||||
$('#header-color').colorpicker().on('changeColor', function(e) {
|
||||
var color = e.color.toString('rgba');
|
||||
$('.main-header .navbar, .header-preview, .left-navblock, .navbar-custom-menu > .navbar-nav, .navbar-custom-menu > .navbar-nav > li > .navbar-form, .navbar-nav > li > a:link, .navbar-nav > li > a').css('background-color', color);
|
||||
@ -448,16 +465,37 @@
|
||||
$('#nav-link-color').colorpicker().on('changeColor', function(e) {
|
||||
var color = e.color.toString('rgba');
|
||||
var header_color = $('#header_color').val();
|
||||
console.log(header_color);
|
||||
|
||||
// $('.navbar-nav > li > a').css('background-color', header_color);
|
||||
$('.navbar-nav > li > a:link').attr('style','color: '+ color +' !important').css('background-color', header_color);
|
||||
$('.btn-theme').attr('style','color: '+ color +' !important').css('background-color', header_color);
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* 5. Add an event listener to toggle the reset
|
||||
*/
|
||||
clearButton.addEventListener("click", (event) => {
|
||||
|
||||
var header_color = '#3c8dbc';
|
||||
var nav_link_color = '#ffffff';
|
||||
var link_light_color = '#296282';
|
||||
var link_dark_color = '#5fa4cc';
|
||||
|
||||
$('#header_color').val(header_color);
|
||||
$('#nav_link_color').val(nav_link_color);
|
||||
$('#link_light_color').val(link_light_color);
|
||||
$('#link_dark_color').val(link_dark_color);
|
||||
|
||||
$('.main-header .navbar, .header-preview, .left-navblock, .navbar-custom-menu > .navbar-nav, .navbar-custom-menu > .navbar-nav > li > .navbar-form, .navbar-nav > li > a:link, .navbar-nav > li > a').css('background-color', header_color);
|
||||
$('.btn-theme').css('background-color', header_color);
|
||||
|
||||
$('.navbar-nav > li > a:link').attr('style','color: '+ nav_link_color +' !important').css('background-color', header_color);
|
||||
$('.btn-theme').attr('style','color: '+ nav_link_color +' !important').css('background-color', header_color);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user