From 58cb35cb05a2cf262747f1898281d173b4dbef23 Mon Sep 17 00:00:00 2001 From: pommicket Date: Sat, 17 Jun 2023 10:11:51 +0100 Subject: ui niceties --- fractiform.js | 9 ++++++++- index.html | 55 +++++++++++++++++++++++++++++++++++-------------------- 2 files changed, 43 insertions(+), 21 deletions(-) diff --git a/fractiform.js b/fractiform.js index 3936a73..8d13fce 100644 --- a/fractiform.js +++ b/fractiform.js @@ -28,6 +28,7 @@ let mouse_x, mouse_y; let viewport_width, viewport_height, viewport_scale; let ui_shape = []; let ui_vertices = []; +let ui_vertex_properties_div; let ui_color_input; let ui_color_mix_input; let ui_div; @@ -251,6 +252,7 @@ function startup() { ui_canvas = document.getElementById('ui-canvas'); ui_color_input = document.getElementById('color-input'); ui_color_mix_input = document.getElementById('color-mix-input'); + ui_vertex_properties_div = document.getElementById('vertex-properties'); ui_ctx = ui_canvas.getContext('2d'); gl = canvas.getContext('webgl'); @@ -312,10 +314,15 @@ function startup() { } function ui_is_editing_shape() { - return ui_tool == TOOL_TRIANGLE || ui_tool == TOOL_UV; + return ui_tool === TOOL_TRIANGLE || ui_tool === TOOL_UV; +} + +function ui_is_editing_vertex() { + return ui_tool === TOOL_TRIANGLE; } function frame(time) { + ui_vertex_properties_div.style.display = ui_is_editing_vertex() ? 'inline-block' : 'none'; current_time = time * 1e-3; let page_width = page.offsetWidth; diff --git a/index.html b/index.html index 08ae0d7..56698c5 100644 --- a/index.html +++ b/index.html @@ -82,7 +82,7 @@ vertical-align: middle; display: inline-block; height: 2.0em; - margin: 0.3em 0.1em 0.3em 0.3em; + margin: 0.3em 0 0.3em 0.3em; border: 2px solid var(--ui-border); background-color: black; color: white; @@ -95,9 +95,20 @@ font-size: inherit; height: 1.5em; } + input[type=number] { + /* disable increment/decrement buttons (firefox) */ + -moz-appearance: textfield; + } + input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { + /* disable increment/decrement buttons (webkit) */ + -webkit-appearance: none; + } #ui label { margin-right: 0.5em; } + #ui div { + display: inline-block; + } img.icon { height: 1.5em; } @@ -168,25 +179,29 @@ void main() {
- - - - - - - - +
+ + + + +
+
+ + + + +
-- cgit v1.2.3