diff --git a/src/gui/src/UI/Components/Slider.js b/src/gui/src/UI/Components/Slider.js deleted file mode 100644 index 73422dae4..000000000 --- a/src/gui/src/UI/Components/Slider.js +++ /dev/null @@ -1,115 +0,0 @@ -/** - * Copyright (C) 2024-present Puter Technologies Inc. - * - * This file is part of Puter. - * - * Puter is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published - * by the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - */ - - -const Component = use('util.Component'); - -/** - * Slider: A labeled slider input. - */ -export default def(class Slider extends Component { - static ID = 'ui.component.Slider'; - - static PROPERTIES = { - name: { value: null }, - label: { value: null }, - min: { value: 0 }, - max: { value: 100 }, - value: { value: null }, - step: { value: 1 }, - on_change: { value: null }, - }; - - static RENDER_MODE = Component.NO_SHADOW; - - static CSS = /*css*/` - .slider-label { - color: var(--primary-color); - } - - .slider-input { - --webkit-appearance: none; - width: 100%; - height: 25px; - background: #d3d3d3; - outline: none; - opacity: 0.7; - --webkit-transition: .2s; - transition: opacity .2s; - } - - .slider-input:hover { - opacity: 1; - } - - .slider-input::-webkit-slider-thumb { - --webkit-appearance: none; - appearance: none; - width: 25px; - height: 25px; - background: #04AA6D; - cursor: pointer; - } - - .slider-input::-moz-range-thumb { - width: 25px; - height: 25px; - background: #04AA6D; - cursor: pointer; - } - `; - - create_template ({ template }) { - const label = this.get('label') ?? this.get('name'); - - $(template).html(/*html*/` -
- - -
- `); - } - - on_ready ({ listen }) { - const input = this.dom_.querySelector('.slider-input'); - - // Set attributes here to prevent XSS injection - { - const min = this.get('min'); - input.setAttribute('min', min); - input.setAttribute('max', this.get('max')); - input.setAttribute('step', this.get('step') ?? 1); - input.value = this.get('value') ?? min; - } - - input.addEventListener('input', e => { - const on_change = this.get('on_change'); - if (on_change) { - const name = this.get('name'); - const label = this.get('label') ?? name; - e.meta = { name, label }; - on_change(e); - } - }); - - listen('value', value => { - input.value = value; - }); - } -}); diff --git a/src/gui/src/UI/UIWindowSignup.js b/src/gui/src/UI/UIWindowSignup.js index da1fd1533..595a72696 100644 --- a/src/gui/src/UI/UIWindowSignup.js +++ b/src/gui/src/UI/UIWindowSignup.js @@ -111,7 +111,6 @@ function UIWindowSignup(options){ allow_native_ctxmenu: true, allow_user_select: true, ...options.window_options, - // width: 350, dominant: false, center: true, onAppend: function(el_window){ diff --git a/src/gui/src/UI/UIWindowThemeDialog.js b/src/gui/src/UI/UIWindowThemeDialog.js index bf1903d3e..1b8ade126 100644 --- a/src/gui/src/UI/UIWindowThemeDialog.js +++ b/src/gui/src/UI/UIWindowThemeDialog.js @@ -16,10 +16,7 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import UIComponentWindow from './UIComponentWindow.js'; -import Button from './Components/Button.js'; -import Flexer from './Components/Flexer.js'; -import Slider from './Components/Slider.js'; +import UIWindow from './UIWindow.js'; const UIWindowThemeDialog = async function UIWindowThemeDialog (options) { options = options ?? {}; @@ -28,70 +25,33 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog (options) { let state = {}; - const slider_ch = (e) => { - state[e.meta.name] = e.target.value; - if (e.meta.name === 'lig') { - state.light_text = e.target.value < 60 ? true : false; - } - svc_theme.apply(state); - }; + let h = ''; + h += '
'; + h += ``; + h += `
`; + h += ``; + h += ``; + h += `
`; + h += `
`; + h += ``; + h += ``; + h += `
`; + h += `
`; + h += ``; + h += ``; + h += `
`; + h += `
`; + h += ``; + h += ``; + h += `
`; + h += '
'; - const hue_slider = new Slider({ - label: i18n('hue'), - name: 'hue', min: 0, max: 360, - value: svc_theme.get('hue'), - on_change: slider_ch, - }); - const sat_slider = new Slider({ - label: i18n('saturation'), - name: 'sat', min: 0, max: 100, - value: svc_theme.get('sat'), - on_change: slider_ch, - }); - const lig_slider = new Slider({ - label: i18n('lightness'), - name: 'lig', min: 0, max: 100, - value: svc_theme.get('lig'), - on_change: slider_ch, - }); - const alpha_slider = new Slider({ - label: i18n('transparency'), - name: 'alpha', min: 0, max: 1, step: 0.01, - value: svc_theme.get('alpha'), - on_change: slider_ch, - }); - - const component = new Flexer({ - children: [ - new Button({ - label: i18n('reset_colors'), - style: 'secondary', - on_click: () => { - svc_theme.reset(); - state = {}; - hue_slider.set('value', svc_theme.get('hue')); - sat_slider.set('value', svc_theme.get('sat')); - lig_slider.set('value', svc_theme.get('lig')); - alpha_slider.set('value', svc_theme.get('alpha')); - }, - }), - hue_slider, - sat_slider, - lig_slider, - alpha_slider, - ], - gap: '10pt', - }); - - const w = await UIComponentWindow({ + const el_window = await UIWindow({ title: i18n('ui_colors'), - component, icon: null, uid: null, is_dir: false, - message: 'message', - // body_icon: options.body_icon, - // backdrop: options.backdrop ?? false, + body_content: h, is_resizable: false, is_droppable: false, has_head: true, @@ -102,31 +62,43 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog (options) { show_in_taskbar: false, window_class: 'window-alert', dominant: true, - body_content: '', width: 350, - // parent_uuid: options.parent_uuid, - // ...options.window_options, window_css:{ height: 'initial', }, body_css: { width: 'initial', padding: '20px', - // 'background-color': `hsla( - // var(--primary-hue), - // calc(max(var(--primary-saturation) - 15%, 0%)), - // calc(min(100%,var(--primary-lightness) + 20%)), .91)`, 'background-color': `hsla( var(--primary-hue), var(--primary-saturation), var(--primary-lightness), var(--primary-alpha))`, 'backdrop-filter': 'blur(3px)', - }, ...options.window_options, }); + // Event handlers + $(el_window).find('.theme-slider').on('input', function(e) { + const name = $(this).attr('name'); + const value = parseFloat($(this).val()); + state[name] = value; + if (name === 'lig') { + state.light_text = value < 60 ? true : false; + } + svc_theme.apply(state); + }); + + $(el_window).find('.reset-colors-btn').on('click', function() { + svc_theme.reset(); + state = {}; + $(el_window).find('#hue-slider').val(svc_theme.get('hue')); + $(el_window).find('#sat-slider').val(svc_theme.get('sat')); + $(el_window).find('#lig-slider').val(svc_theme.get('lig')); + $(el_window).find('#alpha-slider').val(svc_theme.get('alpha')); + }); + return {}; }