diff --git a/resources/web/guide/22/22.css b/resources/web/guide/22/22.css index ee2a7d2746..81fd43b614 100644 --- a/resources/web/guide/22/22.css +++ b/resources/web/guide/22/22.css @@ -15,49 +15,29 @@ flex-shrink: 0; } -.CValues -{ - display:flex; - justify-content: flex-start; - align-content: flex-start; - flex-wrap: wrap; -} - -input -{ - margin-left: 20px; - margin-right: 6px; - vertical-align: middle; -} - -#ItemSelectArea -{ - flex: 0 0 40px; - height:40px; - border-top: 1px solid #009688; - display: flex; - align-items: center; -} - #ItemBlockArea { - flex: 1 0 236px; display:flex; - overflow-x:auto; + overflow-y:scroll; flex-wrap:wrap; - flex-direction: column; - justify-content:flex-start; - align-items: flex-start; - align-content:flex-start; - line-height: 32px; + flex-direction: row; + padding: 0 0 0 8px; } .MItem { - min-width: 180px; /* ORCA Filtered items > slightly reduce min width to fit more items*/ - height: 32px; + width:33%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 4px !important; + top: -100px; /* ORCA this will be activated when item filtered with position:absolute */ } +.MItem label +{ + margin-right: 0px !important; +} #NoticeMask { @@ -87,7 +67,7 @@ input #NoticeBar { - background-color:#00f0d8; + background-color: var(--main-color); height: 40px; line-height: 40px; color: #fff; @@ -111,3 +91,174 @@ input { display: none; } + + +/* ORCA column browser */ + +#Content { + padding: 10px 15px 5px; + height: 100%; +} + +.cbr-browser-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 210px auto; + width: 100%; + height: 100%; + border: 1px solid var(--border-color); + box-sizing: border-box; +} + +.cbr-column:last-child { + grid-column: 1 / -1; + border-top: 1px solid var(--border-color); +} + +.cbr-column { + display: flex; + flex-direction: column; + overflow: hidden; +} + +.cbr-column:nth-child(-n+2) { + border-right: 1px solid var(--border-color); +} + +.cbr-column .CValues { + display: grid; +} + +.CValues label { + margin-right: 0 !important; +} + +.cbr-column-title-container { + position: sticky; + background: var(--bg-color-secondary); + display: flex; + align-items: center; + border-bottom: 1px solid var(--border-color); +} + +.cbr-search-bar, +.cbr-filter-bar { + font-size: 16px; + background: var(--bg-color-secondary); + border: 1px solid transparent; + padding: 2px 27px 2px 27px; + line-height: 24px; +} + +.cbr-search-bar { + width: calc(100% - 18px); +} + +.cbr-filter-bar { + border-color: var(--border-color); + width: 160px; + height:24px; +} + +.cbr-column-title-container .ComboBox > select { + margin: 3px 0; + height: 30px; +} + +.cbr-column-title-container input:is(:hover,:focus) { + border-color: var(--main-color); + outline: none; +} + +.cbr-column-title-container input:is(:focus) { + background: var(--focus-bg-box); +} + +.cbr-filter-box { + position: relative; + margin: 3px; +} + +.cbr-filter-btns { + display: flex; + margin: 5px 5px 5px auto; +} + +.cbr-filter-btns div:first-of-type { + margin-left: 10px; +} + +.cbr-filter-mode-filter { + display: none; +} + +.clear-icon, +.search-icon, +.filter-icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + -webkit-mask-image: var(--url); + mask-image: var(--url); + width: 16px; + height: 16px; + background-color: var(--icon-color); + pointer-events:none; +} + +.filter-icon {--url: var(--icon-filter)} +.search-icon {--url: var(--icon-search)} +.clear-icon {--url: var(--icon-input-clear)} + +.search-icon, +.filter-icon { + left: 6px; +} + +.clear-icon { + right: 6px; + display: none; +} + +.cbr-search-bar:not(:placeholder-shown) ~ .clear-icon, +.cbr-filter-bar:not(:placeholder-shown) ~ .clear-icon { + display: block; +} + +input[onclear="1"]{ + cursor:default +} + +.cbr-search-placeholder, +.cbr-filter-placeholder { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 16px; + color: var(--fg-color-label); + pointer-events: none; + line-height: 24px; + left: 27px; +} + +.cbr-search-bar:not(:placeholder-shown) + .cbr-search-placeholder, +.cbr-filter-bar:not(:placeholder-shown) + .cbr-filter-placeholder { + opacity: 0; +} + +.cbr-content { + overflow-y: auto; +} + +.cbr-content div { + padding-left: 8px; +} + +.cbr-content label { + margin-right: 0 !important; + padding: 1px 0 !important; +} + +.cbr-content div.cbr-no-items { + display: none; +} diff --git a/resources/web/guide/22/22.js b/resources/web/guide/22/22.js index 0283936ee0..3887aa32bc 100644 --- a/resources/web/guide/22/22.js +++ b/resources/web/guide/22/22.js @@ -61,7 +61,7 @@ function SortUI() { let sModel=ModelList[n]; /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */ - HtmlMode+=''; + HtmlMode+=''; } $('#MachineList .CValues').append(HtmlMode); @@ -132,7 +132,7 @@ function SortUI() if(!TypeHtmlArray.hasOwnProperty(LowType)) { /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */ - let HtmlType=''; + let HtmlType=''; TypeHtmlArray[LowType]=HtmlType; } @@ -142,7 +142,7 @@ function SortUI() if(!VendorHtmlArray.hasOwnProperty(lowVendor)) { /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */ - let HtmlVendor=''; + let HtmlVendor=''; VendorHtmlArray[lowVendor]=HtmlVendor; } @@ -152,7 +152,7 @@ function SortUI() if(pFila.length==0) { /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */ - let HtmlFila=''; + let HtmlFila=''; // Separate generic and non-generic filaments if(fVendor.toLowerCase() === 'generic') { @@ -475,13 +475,14 @@ function ChooseDefaultFilament() function SelectAllFilament( nShow ) { - if( nShow==0 ) - { - $('#ItemBlockArea input').prop("checked",false); + // ORCA add ability to only select / unselect filted items + if (document.querySelector('.cbr-filter-bar').value) { + $('#ItemBlockArea .MItem:visible input') + .filter(function() {return $(this).closest('.MItem').css('position') !== 'absolute'}) + .prop("checked", nShow != 0); } - else - { - $('#ItemBlockArea input').prop("checked",true); + else { + $('#ItemBlockArea .MItem:visible input').prop("checked",nShow!=0); } } diff --git a/resources/web/guide/22/index.html b/resources/web/guide/22/index.html index c104d82a09..70af38510f 100644 --- a/resources/web/guide/22/index.html +++ b/resources/web/guide/22/index.html @@ -21,36 +21,83 @@
Filament Selection
- -
-
printer：
-
- + +
+
+
+
+ + printer +
+
+
+
+ +
+
No items
+
-
- -
-
filament type：
-
- + +
+
+
+ + filament type +
+
+
+
+ +
+
No items
+
+
+ +
+
+
+ + vendor +
+
+
+
+ +
+
No items
+
+
+ +
+
+
+
+ + Filter items +
+
+
+
+ +
+
+ Select filtered + Select visible +
all
+
Clear all
+
+
+
+ +
No items
+
- -
-
vendor：
-
- -
-
- -
-
All
-
Clear all
-
-
-
-
Back
@@ -72,4 +119,105 @@
+ diff --git a/resources/web/guide/23/23.css b/resources/web/guide/23/23.css index 57a376e458..a9b802b016 100644 --- a/resources/web/guide/23/23.css +++ b/resources/web/guide/23/23.css @@ -15,50 +15,29 @@ flex-shrink: 0; } -.CValues -{ - display:flex; - justify-content: flex-start; - align-content: flex-start; - flex-wrap: wrap; -} - -input -{ - margin-left: 20px; - margin-right: 6px; - vertical-align: middle; -} - -#ItemSelectArea -{ - flex: 0 0 40px; - height:40px; - border-top: 1px solid #009688; - display: flex; - align-items: center; -} - #ItemBlockArea { display:flex; - overflow-x:auto; + overflow-y:scroll; flex-wrap:wrap; - flex-direction: column; - justify-content:flex-start; - align-items: flex-start; - align-content:flex-start; - line-height: 32px; - height: 100%; - flex:1 0 236px; + flex-direction: row; + padding: 0 0 0 8px; } .MItem { - min-width: 180px; /* ORCA Filtered items > slightly reduce min width to fit more items*/ - height: 32px; + width:33%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 4px !important; + top: -100px; /* ORCA this will be activated when item filtered with position:absolute */ } +.MItem label +{ + margin-right: 0px !important; +} #NoticeMask { @@ -88,7 +67,7 @@ input #NoticeBar { - background-color:#00f0d8; + background-color: var(--main-color); height: 40px; line-height: 40px; color: #fff; @@ -112,6 +91,7 @@ input { display: none; flex-direction: column; + height: 100%; } #CFilament_Btn_Area @@ -124,7 +104,7 @@ input #Title { margin: 0px 40px; - border-bottom: 1px solid #000; + border-bottom: 1px solid var(--border-color); display: flex; flex-direction: row; justify-content: center; @@ -142,7 +122,7 @@ input height: calc(100% - 6px); display: flex; align-items: center; - border-bottom: 6px solid #009688; + border-bottom: 6px solid var(--main-color); } #Title div.TitleUnselected @@ -200,3 +180,176 @@ input { } + +/* ORCA column browser */ + +#Content { + height: 100%; +} + +body:has(#SystemFilamentBtn.TitleSelected) #Content { /* :has selector browser support 2023+ */ + padding: 15px 15px 5px; +} + +.cbr-browser-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 210px auto; + width: 100%; + height: 100%; + border: 1px solid var(--border-color); + box-sizing: border-box; +} + +.cbr-column:last-child { + grid-column: 1 / -1; + border-top: 1px solid var(--border-color); +} + +.cbr-column { + display: flex; + flex-direction: column; + overflow: hidden; +} + +.cbr-column:nth-child(-n+2) { + border-right: 1px solid var(--border-color); +} + +.cbr-column .CValues { + display: grid; +} + +.CValues label { + margin-right: 0 !important; +} + +.cbr-column-title-container { + position: sticky; + background: var(--bg-color-secondary); + display: flex; + align-items: center; + border-bottom: 1px solid var(--border-color); +} + +.cbr-search-bar, +.cbr-filter-bar { + font-size: 16px; + background: var(--bg-color-secondary); + border: 1px solid transparent; + padding: 2px 27px 2px 27px; + line-height: 24px; +} + +.cbr-search-bar { + width: calc(100% - 18px); +} + +.cbr-filter-bar { + border-color: var(--border-color); + width: 160px; + height:24px; +} + +.cbr-column-title-container .ComboBox > select { + margin: 3px 0; + height: 30px; +} + +.cbr-column-title-container input:is(:hover,:focus) { + border-color: var(--main-color); + outline: none; +} + +.cbr-column-title-container input:is(:focus) { + background: var(--focus-bg-box); +} + +.cbr-filter-box { + position: relative; + margin: 3px; +} + +.cbr-filter-btns { + display: flex; + margin: 5px 5px 5px auto; +} + +.cbr-filter-btns div:first-of-type { + margin-left: 10px; +} + +.cbr-filter-mode-filter { + display: none; +} + +.clear-icon, +.search-icon, +.filter-icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + -webkit-mask-image: var(--url); + mask-image: var(--url); + width: 16px; + height: 16px; + background-color: var(--icon-color); + pointer-events:none; +} + +.filter-icon {--url: var(--icon-filter)} +.search-icon {--url: var(--icon-search)} +.clear-icon {--url: var(--icon-input-clear)} + +.search-icon, +.filter-icon { + left: 6px; +} + +.clear-icon { + right: 6px; + display: none; +} + +.cbr-search-bar:not(:placeholder-shown) ~ .clear-icon, +.cbr-filter-bar:not(:placeholder-shown) ~ .clear-icon { + display: block; +} + +input[onclear="1"]{ + cursor:default +} + +.cbr-search-placeholder, +.cbr-filter-placeholder { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size: 16px; + color: var(--fg-color-label); + pointer-events: none; + line-height: 24px; + left: 27px; +} + +.cbr-search-bar:not(:placeholder-shown) + .cbr-search-placeholder, +.cbr-filter-bar:not(:placeholder-shown) + .cbr-filter-placeholder { + opacity: 0; +} + +.cbr-content { + overflow-y: auto; +} + +.cbr-content div { + padding-left: 8px; +} + +.cbr-content label { + margin-right: 0 !important; + padding: 1px 0 !important; +} + +.cbr-content div.cbr-no-items { + display: none; +} \ No newline at end of file diff --git a/resources/web/guide/23/23.js b/resources/web/guide/23/23.js index a0071f503e..251cc797ed 100644 --- a/resources/web/guide/23/23.js +++ b/resources/web/guide/23/23.js @@ -452,13 +452,14 @@ function ChooseDefaultFilament() function SelectAllFilament( nShow ) { - if( nShow==0 ) - { - $('#ItemBlockArea .MItem:visible input').prop("checked",false); + // ORCA add ability to only select / unselect filted items + if (document.querySelector('.cbr-filter-bar').value) { + $('#ItemBlockArea .MItem:visible input') + .filter(function() {return $(this).closest('.MItem').css('position') !== 'absolute'}) + .prop("checked", nShow != 0); } - else - { - $('#ItemBlockArea .MItem:visible input').prop("checked",true); + else { + $('#ItemBlockArea .MItem:visible input').prop("checked",nShow!=0); } } diff --git a/resources/web/guide/23/index.html b/resources/web/guide/23/index.html index 34d69fd8c2..682b7dccd6 100644 --- a/resources/web/guide/23/index.html +++ b/resources/web/guide/23/index.html @@ -23,36 +23,85 @@
-
-
printer：
-
- + + +
+
+
+
+ + printer +
+
+
+
+ +
+
No items
+
-
- -
-
filament type：
-
- + +
+
+
+ + filament type +
+
+
+
+ +
+
No items
+
+
+ +
+
+
+ + vendor +
+
+
+
+ +
+
No items
+
+
+ +
+
+
+
+ + Filter items +
+
+
+
+ +
+
+ Select filtered + Select visible +
all
+
Clear all
+
+
+
+ +
No items
+
-
- -
-
vendor：
-
- -
-
-
all
-
Clear all
-
- -
-
-
@@ -89,15 +138,106 @@ if (e.keyCode == 27) ClosePage(); - if (window.event) { - try { e.keyCode = 0; } catch (e) { } - e.returnValue = false; - } + //if (window.event) { + // try { e.keyCode = 0; } catch (e) { } + // e.returnValue = false; + //} }; window.addEventListener('wheel', function (event) { if (event.ctrlKey === true || event.metaKey) { event.preventDefault(); } }, { passive: false }); + + function addClearBtnEvents(el){ + el.addEventListener('click', e => { + if (el.getAttribute("onclear") == "1") { + el.value = ''; + el.dispatchEvent(new Event('input', {bubbles: true})); + } + }); + el.addEventListener('mousemove', e => { + const rc = el.getBoundingClientRect(); + const onRight = el.value && (e.clientX - rc.left > rc.width - 32); + el.setAttribute("onclear", onRight ? "1" : "0"); + }); + el.addEventListener('mouseleave', e => { + el.setAttribute("onclear", "0"); + }); + } + + document.querySelectorAll('.cbr-search-bar').forEach(searchBar => { + searchBar.addEventListener('input', function() { + const search = this.value.trim().toLowerCase(), + list = this.closest('.cbr-column').querySelector('.cbr-content'), + items = list.querySelectorAll('label'); + let hidden = 0; + + items.forEach((item, i) => { + if(i == 0){ + item.style.display ="block"; + return; + }; + const text = item.querySelector("span").textContent.toLowerCase(); + const hide = search && !text.includes(search); + item.style.display = hide ? "none" : "block"; + if(hide) hidden++; + }); + + if(items.length - hidden == 1){ + items[0].style.display = "none"; + hidden++; + } + + list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none"; + }); + addClearBtnEvents(searchBar); + }); + + const filterBar = document.querySelector('.cbr-filter-bar'); + const filterModeFilter = document.querySelector('.cbr-filter-mode-filter' ); + const filterModeVisible = document.querySelector('.cbr-filter-mode-visible'); + + filterBar.addEventListener('input', function() { + const search = this.value.trim().toLowerCase(); + const list = this.closest('.cbr-column').querySelector('.cbr-content'); + const items = list.querySelectorAll('label'); + let hidden = 0; + + filterModeFilter.style.display = search ? "block" : "none"; + filterModeVisible.style.display = search ? "none" : "block"; + + const showSel = search == "::checked"; + const showUnsel = search == "::unchecked"; + + if(showSel || showUnsel){ + items.forEach(item => { + const cb = item.querySelector("input"); + const hide = showSel ? !cb.checked : cb.checked; + item.style.position = hide ? "absolute" : "unset"; + if(hide) hidden++; + }); + } + else { + items.forEach(item => { + const text = item.querySelector("span").textContent.toLowerCase(); + const hide = search && !text.includes(search); + item.style.position = hide ? "absolute" : "unset"; + if(hide) hidden++; + }); + } + + list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none"; + }); + addClearBtnEvents(filterBar); + + document.querySelector('#filter-tags').addEventListener('change', e => { + let v = e.target.value; + filterBar.value = v == "1" ? "::checked" : "::unchecked"; + filterBar.dispatchEvent(new Event('input', {bubbles: true})); + filterBar.focus(); + e.target.value = 0; // reset back to make dropdown items always selectable + }); + diff --git a/resources/web/guide/css/common.css b/resources/web/guide/css/common.css index a1da1c0b22..b1bd1c2d72 100644 --- a/resources/web/guide/css/common.css +++ b/resources/web/guide/css/common.css @@ -130,6 +130,7 @@ label:has(input[type="checkbox"]){ label:has(input[type="checkbox"])>span{ vertical-align: middle; + line-height: 1.2em; margin:0; } diff --git a/resources/web/include/global.css b/resources/web/include/global.css index e1473aa075..2b9d2da142 100644 --- a/resources/web/include/global.css +++ b/resources/web/include/global.css @@ -1,39 +1,84 @@ /*----ORCA UNIFIED STYLING FOR ALL CONTROLS----*/ -/*----GLOBAL VARIABLES ----*/ +/*////////////////////////////*/ +/* VARIABLES */ +/*////////////////////////////*/ + +/*/// CONTROL VALUES ///*/ :root { --dialog-button-sizer-height : 62px; /*----32 + 15 * 2----*/ --dialog-button-gap : 15px; } -/*----GLOBAL COLORS ----*/ +/*/// COLORS ///*/ :root { - --main-color : #009688; - --main-color-hover : #26A69A; - --button-fg-light : #FEFEFE; - --button-fg-text : #262E30; - --button-fg-disabled : #6B6B6B; - --button-bg-normal : #DFDFDF; - --button-bg-hover : #D4D4D4; - --button-bg-disabled : var(--button-bg-normal); - --button-bg-alert : #E14747; + --main-color : #009688; + --main-color-hover : #26A69A; + --main-color-fixed : #009688; + --bg-color : #FFFFFF; + --bg-color-secondary : #F4F4F4; + --bg-color-alt : #F0F0F0; + --fg-color-text : #262E30; + --fg-color-label : #363636; + --fg-color-disabled : #ACACAC; + --focus-bg-item : #BFE1DE; + --focus-bg-box : #E5F0EE; + --border-color : #DBDBDB; + --icon-color : #7C8282; + --button-fg-light : #FEFEFE; + --button-fg-text : #262E30; + --button-fg-disabled : #6B6B6B; + --button-bg-normal : #DFDFDF; + --button-bg-hover : #D4D4D4; + --button-bg-disabled : var(--button-bg-normal); + --button-bg-alert : #E14747; } @media (prefers-color-scheme: dark) { :root { - --main-color : #00675B; - --main-color-hover : #008172; - --button-fg-light : #FEFEFE; - --button-fg-text : #EFEFF0; - --button-fg-disabled : #818183; - --button-bg-normal : #3E3E45; - --button-bg-hover : #4D4D54; - --button-bg-disabled : var(--button-bg-normal); - --button-bg-alert : #E14747; + --main-color : #00675B; + --main-color-hover : #008172; + --main-color-fixed : #009688; + --bg-color : #2D2D31; + --bg-color-secondary : #36363B; + --bg-color-alt : #242428; + --fg-color-text : #EFEFF0; + --fg-color-label : #B2B3B5; + --fg-color-disabled : #65656A; + --focus-bg-item : #223C3C; + --focus-bg-box : #283232; + --border-color : #4A4A51; + --icon-color : #949494; + --button-fg-light : #FEFEFE; + --button-fg-text : #EFEFF0; + --button-fg-disabled : #818183; + --button-bg-normal : #3E3E45; + --button-bg-hover : #4D4D54; + --button-bg-disabled : var(--button-bg-normal); + --button-bg-alert : #E14747; } } -/*----BUTTONS ----*/ +/*////////////////////////////*/ +/* ICONS */ +/*////////////////////////////*/ + +:root { +--icon-filter: + url('data:image/svg+xml;utf8,'); +--icon-search: + url('data:image/svg+xml;utf8,'); +--icon-input-clear: + url('data:image/svg+xml;utf8,'); +--icon-combo-arrow: + url('data:image/svg+xml;utf8,'); +} + +/*////////////////////////////*/ +/* UI COMPONENTS */ +/*////////////////////////////*/ + +/*/// BUTTONS ///*/ /*----Values slightly different since renderer is different----*/ /*----Currently no support for focus border----*/ .ButtonTypeCompact { font-size: 11px; padding: 0px 8px ; border-radius: 12px; line-height: 23px; height: 24px; text-align: center} @@ -71,3 +116,92 @@ .ButtonStyleAlert { background: var(--button-bg-normal ); color: var(--button-fg-text )} .ButtonStyleAlert:hover { background: var(--button-bg-alert ); color: var(--button-fg-light )} .ButtonStyleDisabled { background: var(--button-bg-disabled); color: var(--button-fg-disabled)} + +/*/// COMBOBOX ///*/ +/* +STRUCTURE +
+
+ +
+OPTIONS + NoLabel : Hides label and just shows arrow icon +*/ +.ComboBox { + position: relative; + background: inherit; +} + +.ComboBox > select { + width: 120px; + background: inherit; + border: 1px solid var(--border-color); + border-radius: 0; + appearance: none; + -webkit-appearance: none; /* Hide arrow */ + font-size: 14px; + color: var(--fg-color-text); + padding: 4px 4px 4px 24px; +} + +.ComboBox > .arrow-icon { + position: absolute; + width: 16px; + height: 16px; + left: 7px; + top: 50%; + transform: translateY(-50%); + mask-image: var(--icon-combo-arrow); + -webkit-mask-image: var(--icon-combo-arrow); + background-color: var(--icon-color); + pointer-events: none; +} + +.ComboBox > select:focus { + outline: none; + background-color: var(--focus-bg-box); + border-color: var(--main-color);; +} + +.ComboBox > select:hover { + border-color: var(--main-color);; +} + +.ComboBox.NoLabel > select { + width: 28px; + height: 28px; + padding: 4px; + color: transparent; + font-size: unset; +} + +.ComboBox option { + background: var(--bg-color); +} + +.ComboBox option:checked { + background: var(--focus-bg-item); +} + +/*/// SCROLL BARS ///*/ +.thin-scroll::-webkit-scrollbar { + width: 10px; + height: 10px +} + +.thin-scroll::-webkit-scrollbar-track { + background: var(--bg-color-alt); +} + +.thin-scroll::-webkit-scrollbar-thumb { + background: var(--button-bg-normal); + border-radius: 5px; +} + +.thin-scroll::-webkit-scrollbar-thumb:hover { + background: var(--button-bg-hover); +} \ No newline at end of file