bug fixes and updates

This commit is contained in:
Michael Becker 2024-06-05 00:21:37 -04:00
parent 5a1a34610a
commit 61617c542c
10 changed files with 152 additions and 4 deletions

View File

@ -97,6 +97,47 @@
<p> <p>
This is a test of the Universal Widget Toolkit for HTML/CSS/JavaScript. This is a test of the Universal Widget Toolkit for HTML/CSS/JavaScript.
</p> </p>
<p>
Check out <uwt:AdditionalDetailWidget Text="Additional Detail Widget"></uwt:AdditionalDetailWidget>
</p>
<div>
Try this <div class="uwt-actionpreviewbutton">
<a href="#" class="apb-text">Action Preview Button</a>
<a href="#" class="apb-button">&nbsp;</a>
<div class="apb-preview">
<div class="apb-actions">
<h2>Available Actions</h2>
<ul class="uwt-menu">
<li class="uwt-menu-item-command uwt-visible">
<a href="#">Worker</a>
</li>
<li class="uwt-menu-item-command uwt-visible">
<a href="#">Root (K2)</a>
</li>
</ul>
</div>
<div class="apb-preview-content">
<h2>Driver <a href="#">Joseph Rivera</a></h2>
<div class="uwt-formview">
<div class="uwt-formview-item">
<div class="uwt-formview-item-label">Full name</div>
<div class="uwt-formview-item-content">Joseph P Rivera Jr</div>
</div>
<div class="uwt-formview-item">
<div class="uwt-formview-item-label">License status</div>
<div class="uwt-formview-item-content">
<div class="uwt-actionpreviewbutton">
<a href="#" class="apb-text">Active</a>
<a href="#" class="apb-button">&nbsp;</a>
<div class="apb-preview"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uwt-alert uwt-color-info"> <div class="uwt-alert uwt-color-info">
This is an alert. You can use them to display inline warnings or error messages. This is an alert. You can use them to display inline warnings or error messages.
</div> </div>

View File

@ -73,6 +73,7 @@ div.uwt-actionpreviewbutton
padding: 8px; padding: 8px;
margin-left: 8px; margin-left: 8px;
position: absolute; position: absolute;
z-index: 1;
transition: all 0.3s; transition: all 0.3s;
width: max-content; width: max-content;

View File

@ -0,0 +1,4 @@
div.uwt-combobox:not(.uwt-opened) > input
{
cursor: default;
}

View File

@ -53,7 +53,7 @@
@import "mobile/uwt.less"; @import "mobile/uwt.less";
@import "print/uwt.less"; @import "print/uwt.less";
@import "../fonts/awesome/css/all.less"; @import "../../fonts/awesome/css/all.css";
html html
{ {

View File

@ -3,6 +3,7 @@ function DropDownWrapper(parentElement)
this.ParentElement = parentElement; this.ParentElement = parentElement;
this.ParentContainer = this.ParentElement.parentElement; this.ParentContainer = this.ParentElement.parentElement;
this.SelectElement = this.ParentElement; this.SelectElement = this.ParentElement;
this.WrapperElement = null;
this.ShowPopupMenu = function() this.ShowPopupMenu = function()
{ {
@ -18,16 +19,19 @@ function DropDownWrapper(parentElement)
} }
} }
System.ClassList.Add(this.MenuElement, "uwt-visible"); System.ClassList.Add(this.MenuElement, "uwt-visible");
System.ClassList.Add(this.WrapperElement, "uwt-opened");
}; };
this.HidePopupMenu = function() this.HidePopupMenu = function()
{ {
System.ClassList.Remove(this.MenuElement, "uwt-visible"); System.ClassList.Remove(this.MenuElement, "uwt-visible");
System.ClassList.Remove(this.WrapperElement, "uwt-opened");
}; };
var div = document.createElement("div"); var div = document.createElement("div");
div.className = "uwt-combobox"; div.className = "uwt-combobox";
div.ni = this; div.ni = this;
div.tabIndex = 0; div.tabIndex = 0;
this.WrapperElement = div;
this.ParentElement.replaceWith(div); this.ParentElement.replaceWith(div);
div.appendChild(this.SelectElement); div.appendChild(this.SelectElement);

View File

@ -0,0 +1,48 @@
div.uwt-actionpreviewbutton
{
&> a.apb-button
{
border: 1px solid #7490ca;
background: linear-gradient(to bottom, #fafcfe 0%, #b6caf1 100%);
padding: 0px;
width: 22px;
height: 20px;
&:hover
{
background: linear-gradient(to bottom, #fffffb 0%, #ffe8a7 100%);
border-color: #dbce99;
}
&::before
{
content: " ";
background-repeat: no-repeat;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9Ta0UqDnYQEclQneyiIuJUq1CECqFWaNXB5NIvaNKQtLg4Cq4FBz8Wqw4uzro6uAqC4AeIs4OToouU+L+k0CLGg+N+vLv3uHsHCI0y06yuGKDpVTOViIuZ7KoYfEU3AvBjBLMys4w5SUrCc3zdw8fXuyjP8j735+hTcxYDfCJxjBlmlXiDeHqzanDeJw6zoqwSnxOPm3RB4keuKy6/cS44LPDMsJlOzROHicVCBysdzIqmRjxFHFE1nfKFjMsq5y3OWrnGWvfkLwzl9JVlrtMcRgKLWIIEEQpqKKGMKqK06qRYSNF+3MM/5PglcinkKoGRYwEVaJAdP/gf/O7Wyk9OuEmhOBB4se2PUSC4CzTrtv19bNvNE8D/DFzpbX+lAcx8kl5va5EjoH8buLhua8oecLkDDD4Zsik7kp+mkM8D72f0TVlg4BboXXN7a+3j9AFIU1fJG+DgEBgrUPa6x7t7Onv790yrvx+cD3K3FHzArgAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gGBQM2MCPeKV0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACCElEQVQoz5WRTUiUQRyHn5WNzY9ITcPQi0VFahJ9QYJFeqoOHj1mduhYUrcIo+xQXSrKq6eyAkGDwKVTWIYUikmCl6Lv1or3c9933t2d+XcwdbcM7IFhGJjf//cME+vtdwXAV+ArwSjwQxujIAR0ZGEUGGx0ZBEoMDEHUTAx2hWLA+xsKMYNAcBVIGExngJPgahNeCrEKNChjRdZaGXz8cMUAHGAF5PhP9sBcspGFAQxi1y00L7E3ftjshImK6LyVuAZCTwjKdfIt3kjLUe7ZcngTyQHGeDmwBAmsElHDj8T77jYfauwHYi7SlYMD9wbYc/2jTTuOERWC2PPxzl/9Qx9p28gLE8pEuy/DPoGr7C5rpz2g61UVVZRWb6BtsPH2FXfwonLnQV3i1y13LzYvsZK0NTYQE5DlDWklcYPNfVbm1nnrMXJs45L3iHze4+CCKFoIRwa3EBje4av8xY6yhQa5L97kS9Zi8mpafxQ44YayzdYfo6Zl6MkiitIvZ9dNjDKKQgbJfT3XOdc71l+WGmqa7eQ+m4zMzFK6vMcR/aXMf9mkI72Zi71uRL3gLaOkyv9Jk76FTo9TC4bkohF7K1THKgw1Gwr5eH4J9bLW2KskpEnr+XR7VMc311CdU0ZpbVV3Emq1Q8ASD6bkwfXuuhoLGF42qHzwhD/TXJsTlr3Ncnjp7MC8As5fEyps2YlkwAAAABJRU5ErkJggg==');
width: 15px;
height: 16px;
margin-top: 3px;
margin-left: 3px;
}
}
&.apb-selected > a.apb-button
{
background: linear-gradient(to bottom, #dba876 0%, #ff9708 100%);
border-color: #ffb206;
}
&> div.apb-preview
{
border: 1px solid #868686;
background: #fafafa;
box-shadow: 3px 3px 3px #c0c0c0;
&> div.apb-actions
{
background-color: #d1dff8;
border-right: 1px solid #7490ca;
&> h2
{
padding: 8px 16px;
}
}
}
}

View File

@ -0,0 +1,15 @@
div.uwt-combobox
{
&::after
{
content: " ";
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAECAYAAABGM/VAAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9Ta0UqDnYQEclQneyiIuJUq1CECqFWaNXB5NIvaNKQtLg4Cq4FBz8Wqw4uzro6uAqC4AeIs4OToouU+L+k0CLGg+N+vLv3uHsHCI0y06yuGKDpVTOViIuZ7KoYfEU3AvBjBLMys4w5SUrCc3zdw8fXuyjP8j735+hTcxYDfCJxjBlmlXiDeHqzanDeJw6zoqwSnxOPm3RB4keuKy6/cS44LPDMsJlOzROHicVCBysdzIqmRjxFHFE1nfKFjMsq5y3OWrnGWvfkLwzl9JVlrtMcRgKLWIIEEQpqKKGMKqK06qRYSNF+3MM/5PglcinkKoGRYwEVaJAdP/gf/O7Wyk9OuEmhOBB4se2PUSC4CzTrtv19bNvNE8D/DFzpbX+lAcx8kl5va5EjoH8buLhua8oecLkDDD4Zsik7kp+mkM8D72f0TVlg4BboXXN7a+3j9AFIU1fJG+DgEBgrUPa6x7t7Onv790yrvx+cD3K3FHzArgAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gGBQQQKhgtRYYAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAKElEQVQI12NMrF77nwENME2o9kURgPM/fvv1P7F67f+P336h6kIWAADIwRNkiX6QkwAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
width: 8px;
height: 8px;
margin-left: -16px;
display: inline-block;
background-size: 8px;
pointer-events: none;
}
}

View File

@ -2,16 +2,34 @@ div.uwt-disclosure
{ {
&> div.uwt-header &> div.uwt-header
{ {
background: #deecff; position: relative;
background: linear-gradient(to right, #d9e7fd 0%,#e3edfe 50%, #d9e7fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
padding: 8px; padding: 8px;
border-bottom: 1px solid #b2b2b2; border-bottom: 1px solid #b5cffc;
cursor: default; cursor: default;
user-select: none; user-select: none;
&:hover &:hover
{ {
background: linear-gradient(to right, #ffab40 0%,#ffe7a2 50%, #ffe7a2 51%, #ffab40 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, #ffab40 0%,#ffe7a2 50%, #ffe7a2 51%, #ffab40 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
&::after
{
content: " ";
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9Ta0UqDnYQEclQneyiIuJUq1CECqFWaNXB5NIvaNKQtLg4Cq4FBz8Wqw4uzro6uAqC4AeIs4OToouU+L+k0CLGg+N+vLv3uHsHCI0y06yuGKDpVTOViIuZ7KoYfEU3AvBjBLMys4w5SUrCc3zdw8fXuyjP8j735+hTcxYDfCJxjBlmlXiDeHqzanDeJw6zoqwSnxOPm3RB4keuKy6/cS44LPDMsJlOzROHicVCBysdzIqmRjxFHFE1nfKFjMsq5y3OWrnGWvfkLwzl9JVlrtMcRgKLWIIEEQpqKKGMKqK06qRYSNF+3MM/5PglcinkKoGRYwEVaJAdP/gf/O7Wyk9OuEmhOBB4se2PUSC4CzTrtv19bNvNE8D/DFzpbX+lAcx8kl5va5EjoH8buLhua8oecLkDDD4Zsik7kp+mkM8D72f0TVlg4BboXXN7a+3j9AFIU1fJG+DgEBgrUPa6x7t7Onv790yrvx+cD3K3FHzArgAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gGBQMjN4oPWuoAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAALklEQVQI12NMrF77n4GBgWF+azAjAxTAxOAcmAAyG6tqZFMYsBrHwMDAOAB2AgAmHS5lfjAyDAAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
display: inline-block;
position: absolute;
right: 10px;
top: 12px;
width: 7px;
height: 8px;
} }
} }
&.uwt-expanded > div.uwt-header::after
{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9Ta0UqDnYQEclQneyiIuJUq1CECqFWaNXB5NIvaNKQtLg4Cq4FBz8Wqw4uzro6uAqC4AeIs4OToouU+L+k0CLGg+N+vLv3uHsHCI0y06yuGKDpVTOViIuZ7KoYfEU3AvBjBLMys4w5SUrCc3zdw8fXuyjP8j735+hTcxYDfCJxjBlmlXiDeHqzanDeJw6zoqwSnxOPm3RB4keuKy6/cS44LPDMsJlOzROHicVCBysdzIqmRjxFHFE1nfKFjMsq5y3OWrnGWvfkLwzl9JVlrtMcRgKLWIIEEQpqKKGMKqK06qRYSNF+3MM/5PglcinkKoGRYwEVaJAdP/gf/O7Wyk9OuEmhOBB4se2PUSC4CzTrtv19bNvNE8D/DFzpbX+lAcx8kl5va5EjoH8buLhua8oecLkDDD4Zsik7kp+mkM8D72f0TVlg4BboXXN7a+3j9AFIU1fJG+DgEBgrUPa6x7t7Onv790yrvx+cD3K3FHzArgAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gGBQMjLu5k8ioAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAK0lEQVQI12NgQAKJ1Wv/I/MZsUnMbw1mZGBgYGBCloAJwviM6BLYjKennQA4bCc54IMQ+wAAAABJRU5ErkJggg==');
}
} }

View File

@ -13,4 +13,21 @@ body > div.uwt-footer, body > form > div.uwt-footer
background: linear-gradient(to bottom, #e3efff 0%,#c5deff 40%,#add1ff 41%,#c0dbff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to bottom, #e3efff 0%,#c5deff 40%,#add1ff 41%,#c0dbff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: @ControlForegroundColor; color: @ControlForegroundColor;
padding: 8px;
}
a
{
color: #15428b;
text-decoration: none;
&:hover
{
text-decoration: underline;
}
}
body > div.uwt-page > div.uwt-content, body > form > div.uwt-page > div.uwt-content
{
padding: 8px;
} }