From 4cbcad8178b6f0b5394d161705b7139840cded89 Mon Sep 17 00:00:00 2001 From: luk3yx Date: Thu, 6 Feb 2020 20:35:17 +1300 Subject: [PATCH] Add dropdown element. --- fs51/init.lua | 6 ++++++ index.lua | 2 ++ renderer.lua | 27 ++++++++++++++++++++++++++ style.css | 45 ++++++++++++++++++++++++++++++++++++++----- style.scss | 53 +++++++++++++++++++++++++++++++++++++++++++++++++-- 5 files changed, 126 insertions(+), 7 deletions(-) diff --git a/fs51/init.lua b/fs51/init.lua index 3a52aa3..40a49cc 100644 --- a/fs51/init.lua +++ b/fs51/init.lua @@ -124,6 +124,12 @@ function fixers.list(elem, next_elem) elem.type = 'container' end +-- Remove the "height" attribute on dropdowns. +function fixers.dropdown(elem) + elem.h = nil + return default_fixer(elem) +end + -- local pre_types = {size = true, position = true, anchor = true, no_prepend = true} diff --git a/index.lua b/index.lua index e9c4b89..827ae31 100644 --- a/index.lua +++ b/index.lua @@ -44,6 +44,7 @@ local property_names = { h = 'Height', w = 'Width', drawborder = 'Draw border', + item = 'Items', listelem = 'Items', selected_idx = 'Selected item', } @@ -217,6 +218,7 @@ do button[0,0;3,0.75;;] button_exit[0,0;3,0.75;;] checkbox[0,0.2;;;false] + dropdown[0,0;5,0.75;;;1] field[0,0;3,0.75;;;] image[0,0;1,1;] image_button[0,0;2,2;;;;false;true;] diff --git a/renderer.lua b/renderer.lua index d4a554b..bab46ce 100644 --- a/renderer.lua +++ b/renderer.lua @@ -204,6 +204,33 @@ function elems.textlist(node) return res end +function elems.dropdown(node, base, default_callbacks, scale) + local res = make('div') + if not node.h then + res.style.width = (node.w * scale) .. 'px' + res.style.height = (2 * 15/13 * 0.35 * scale) .. 'px' + end + local select = make('select') + for i, item in ipairs(node.item) do + local e = make('option', {textContent = item}, {name = i}) + if i == node.selected_idx then + e:setAttribute('selected', 'selected') + end + select:appendChild(e) + end + window:setTimeout(function() + if res.classList:contains('formspec_ast-clickable') then + select:setAttribute('disabled', 'disabled') + end + end, 0) + res:appendChild(select) + + local btn = make('div') + btn:appendChild(make('div')) + res:appendChild(btn) + return res +end + -- Make images - This uses HDX to simplify things local image_baseurl = 'https://gitlab.com/VanessaE/hdx-128/raw/master/' function renderer.make_image(name, allow_empty) diff --git a/style.css b/style.css index 1f00c52..dbd22f0 100644 --- a/style.css +++ b/style.css @@ -12,9 +12,10 @@ image-rendering: pixelated; } .formspec_ast-base > div.grid { background: url("grid.png"); } - .formspec_ast-base > div, .formspec_ast-base > div input, .formspec_ast-base > div textarea { + .formspec_ast-base > div, .formspec_ast-base > div input, .formspec_ast-base > div textarea, .formspec_ast-base > div select { font-family: Arimo, sans-serif; - color: #FFFFFF; } + color: #FFFFFF; + font-size: inherit; } .formspec_ast-base > div > * { position: absolute; font-size: 0.34em; @@ -40,7 +41,8 @@ background-color: #f002; } .formspec_ast-base .formspec_ast-button, .formspec_ast-base .formspec_ast-button_exit, .formspec_ast-base .formspec_ast-image_button[data-drawborder="true"], -.formspec_ast-base .formspec_ast-image_button_exit[data-drawborder="true"] { +.formspec_ast-base .formspec_ast-image_button_exit[data-drawborder="true"], +.formspec_ast-base .formspec_ast-dropdown > div { box-sizing: border-box; border: 1px solid #000; background: #414141; @@ -51,11 +53,13 @@ justify-content: center; } .formspec_ast-base .formspec_ast-button:hover, .formspec_ast-base .formspec_ast-button_exit:hover, .formspec_ast-base .formspec_ast-image_button[data-drawborder="true"]:hover, - .formspec_ast-base .formspec_ast-image_button_exit[data-drawborder="true"]:hover { + .formspec_ast-base .formspec_ast-image_button_exit[data-drawborder="true"]:hover, + .formspec_ast-base .formspec_ast-dropdown > div:hover { background: linear-gradient(180deg, #656565 0%, #383838 100%); } .formspec_ast-base .formspec_ast-button:active, .formspec_ast-base .formspec_ast-button_exit:active, .formspec_ast-base .formspec_ast-image_button[data-drawborder="true"]:active, - .formspec_ast-base .formspec_ast-image_button_exit[data-drawborder="true"]:active { + .formspec_ast-base .formspec_ast-image_button_exit[data-drawborder="true"]:active, + .formspec_ast-base .formspec_ast-dropdown > div:active { background: linear-gradient(180deg, #464646 0%, #272727 100%); } .formspec_ast-base .formspec_ast-image_button[data-drawborder="false"], .formspec_ast-base .formspec_ast-image_button_exit[data-drawborder="false"] { background: none; @@ -139,6 +143,37 @@ padding: 2px; padding-left: 5px; padding-right: 5px; } +.formspec_ast-base .formspec_ast-dropdown { + border: 2px solid #1E1E1E; + box-sizing: border-box; } + .formspec_ast-base .formspec_ast-dropdown select { + border: none; + border-radius: 0; + background: #1E1E1E; + width: 100%; + height: 100%; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + outline: none; } + .formspec_ast-base .formspec_ast-dropdown select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #fff; } + .formspec_ast-base .formspec_ast-dropdown select:focus { + background: #467832; } + .formspec_ast-base .formspec_ast-dropdown.formspec_ast-clickable select { + pointer-events: none; } + .formspec_ast-base .formspec_ast-dropdown > div { + position: absolute; + top: 0; + right: 0; + width: 15px; + height: 100%; + pointer-events: none; } + .formspec_ast-base .formspec_ast-dropdown > div > div { + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAMAAAB1GNVPAAAAElBMVEU+Pj4/Pz9AQEAVFRUWFhb///+2UyocAAAAA3RSTlMAAAD6dsTeAAAAHUlEQVR42mNggQAGJjDFxMDIyMzMzMjIAATMQAwABbgARWfCNlIAAAAASUVORK5CYII="); + width: 7px; + height: 4px; } #formspec_ast-properties { position: fixed; diff --git a/style.scss b/style.scss index a9a837d..da2bb3d 100644 --- a/style.scss +++ b/style.scss @@ -33,9 +33,10 @@ background: url("grid.png"); } - &, input, textarea { + &, input, textarea, select { font-family: Arimo, sans-serif; color: #FFFFFF; + font-size: inherit; } & > * { @@ -80,7 +81,8 @@ img { .formspec_ast-button, .formspec_ast-button_exit, .formspec_ast-image_button[data-drawborder="true"], - .formspec_ast-image_button_exit[data-drawborder="true"] { + .formspec_ast-image_button_exit[data-drawborder="true"], + .formspec_ast-dropdown > div { box-sizing: border-box; border: 1px solid #000; background: #414141; @@ -213,6 +215,53 @@ img { } } +.formspec_ast-dropdown { + border: 2px solid #1E1E1E; + box-sizing: border-box; + + select { + border: none; + border-radius: 0; + background: #1E1E1E; + width: 100%; + height: 100%; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + + // Remove the outline + outline: none; + &:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #fff; + } + + &:focus { + background: #467832; + } + } + + &.formspec_ast-clickable select { + pointer-events: none; + } + + & > div { + position: absolute; + top: 0; + right: 0; + width: 15px; + height: 100%; + pointer-events: none; + + // The arrow icon + & > div { + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAMAAAB1GNVPAAAAElBMVEU+Pj4/Pz9AQEAVFRUWFhb///+2UyocAAAAA3RSTlMAAAD6dsTeAAAAHUlEQVR42mNggQAGJjDFxMDIyMzMzMjIAATMQAwABbgARWfCNlIAAAAASUVORK5CYII="); + width: 7px; + height: 4px; + } + } +} + } #formspec_ast-properties {