lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-09-22 05:06:10 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Remove Slider component

Browse Source
This commit is contained in:
jelveh
2025-07-27 11:04:45 -07:00
parent 8a697652d9
commit 783a0385d3
3 changed files with 43 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/UI/Components/Slider.js
-115
View File
@@ -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 <https://www.gnu.org/licenses/>.
*/
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*/`
<div class="slider">
<label class="slider-label">${html_encode(label)}</label>
<input class="slider-input" type="range">
</div>
`);
}
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;
});
}
});
src/gui/src/UI/UIWindowSignup.js
-1
View File
@@ -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){
src/gui/src/UI/UIWindowThemeDialog.js
+43 -71
View File
@@ -16,10 +16,7 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
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 += '<div class="theme-dialog-content" style="display: flex; flex-direction: column; gap: 10pt;">';
h += `<button class="button button-secondary reset-colors-btn">${i18n('reset_colors')}</button>`;
h += `<div class="slider-container" style="display: flex; flex-direction: column; gap: 5px;">`;
h += `<label style="font-weight: 500; color: #5f626d;">${i18n('hue')}</label>`;
h += `<input type="range" class="theme-slider" id="hue-slider" name="hue" min="0" max="360" value="${svc_theme.get('hue')}" style="width: 100%;">`;
h += `</div>`;
h += `<div class="slider-container" style="display: flex; flex-direction: column; gap: 5px;">`;
h += `<label style="font-weight: 500; color: #5f626d;">${i18n('saturation')}</label>`;
h += `<input type="range" class="theme-slider" id="sat-slider" name="sat" min="0" max="100" value="${svc_theme.get('sat')}" style="width: 100%;">`;
h += `</div>`;
h += `<div class="slider-container" style="display: flex; flex-direction: column; gap: 5px;">`;
h += `<label style="font-weight: 500; color: #5f626d;">${i18n('lightness')}</label>`;
h += `<input type="range" class="theme-slider" id="lig-slider" name="lig" min="0" max="100" value="${svc_theme.get('lig')}" style="width: 100%;">`;
h += `</div>`;
h += `<div class="slider-container" style="display: flex; flex-direction: column; gap: 5px;">`;
h += `<label style="font-weight: 500; color: #5f626d;">${i18n('transparency')}</label>`;
h += `<input type="range" class="theme-slider" id="alpha-slider" name="alpha" min="0" max="1" step="0.01" value="${svc_theme.get('alpha')}" style="width: 100%;">`;
h += `</div>`;
h += '</div>';
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 {};
}