Skip to content

Commit

Permalink
more consistent text inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianharrigan
ianharrigan committed Nov 12, 2023
1 parent 426549e commit 97a7a4b
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 16 deletions.
22 changes: 20 additions & 2 deletions haxe/ui/_module/styles/default/textinputs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,15 @@
color: $normal-text-color;
border: 1px solid $normal-border-color;
border-radius: 2px;
padding: 1px;
padding: 2px 5px;
padding-bottom: 4px;
filter: $normal-inner-shadow;
background-color: $tertiary-background-color;
initial-width: 150px;
initial-height: 100px;
content-type: auto;
icon-position: right;
spacing: 5px;
}

.textarea.required-value {
Expand Down Expand Up @@ -99,4 +102,19 @@
.textarea:disabled {
border-color: $disabled-border-color;
color: $disabled-text-color;
}
}

.textarea .decorator {
padding: 0px 8px;
background: $normal-background-color-start $normal-background-color-end vertical;
border-radius: $normal-border-radius;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-left: $normal-border-size solid $normal-border-color;
include-in-layout: false;
}

.textarea .decorator .image {
vertical-align:center;
margin-top: -1px;
}
80 changes: 73 additions & 7 deletions haxe/ui/components/TextArea.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,9 @@ class TextArea extends InteractiveComponent implements IFocusable {
**/
@:call(ScrollToBottom) public function scrollToBottom();

@:clonable @:behaviour(IconBehaviour) public var icon:String;
@:style(layout) public var iconPosition:String;

//***********************************************************************************************************
// Validation
//***********************************************************************************************************
Expand Down Expand Up @@ -105,7 +108,23 @@ class TextArea extends InteractiveComponent implements IFocusable {
//***********************************************************************************************************
@:dox(hide) @:noCompletion
private class TextAreaLayout extends DefaultLayout {
private var iconPosition(get, null):String;
private function get_iconPosition():String {
if (component.style.iconPosition == null) {
return "left";
}
return component.style.iconPosition;
}

private override function repositionChildren() {
var decorator = findComponent(Decorator);
var decoratorWidth:Float = 0;
if (decorator != null) {
decorator.left = _component.width - decorator.width - borderSize;
decorator.top = borderSize;
decoratorWidth = decorator.width;
}

var hscroll:Component = component.findComponent(HorizontalScroll, false);
var vscroll:Component = component.findComponent(VerticalScroll, false);

Expand All @@ -117,20 +136,49 @@ private class TextAreaLayout extends DefaultLayout {
hscroll.top = ucy - hscroll.componentHeight + paddingBottom;
}

var vscrollWidth:Float = 0;
if (vscroll != null && hidden(vscroll) == false) {
vscroll.left = ucx - vscroll.componentWidth + paddingRight + paddingLeft - borderSize;
vscroll.left = ucx - vscroll.componentWidth + paddingRight + paddingLeft - borderSize - decoratorWidth;
vscroll.top = borderSize;
vscrollWidth = vscroll.componentWidth;
}

var icon:Image = component.findComponent(Image, false);
var xpos:Float = paddingLeft;
if (icon != null) {
switch (iconPosition) {
case "left":
icon.left = xpos + 3;
icon.top = (component.componentHeight / 2) - (icon.componentHeight / 2);
xpos += icon.componentWidth + horizontalSpacing;
case "right":
icon.left = component.componentWidth - icon.componentWidth - paddingRight - 3 - vscrollWidth - decoratorWidth;
icon.top = (component.componentHeight / 2) - (icon.componentHeight / 2);
}
}

if (component.hasTextInput() == true) {
component.getTextInput().left = paddingLeft + 2;
component.getTextInput().left = xpos + 2;
component.getTextInput().top = paddingTop + 2;
}
}

private override function resizeChildren() {
//super.resizeChildren();

var offset:Float = 0;
var decorator = findComponent(Decorator);
if (decorator != null) {
var cy = _component.height - (borderSize * 2);
decorator.height = cy;
offset += decorator.width;
}

var icon:Image = component.findComponent(Image, false);
if (icon != null) {
offset += icon.width;
}

var hscroll:Component = component.findComponent(HorizontalScroll, false);
var vscroll:Component = component.findComponent(VerticalScroll, false);

Expand All @@ -141,15 +189,13 @@ private class TextAreaLayout extends DefaultLayout {

if (vscroll != null && hidden(vscroll) == false) {
vscroll.height = usableSize.height - ((borderSize) * 2) + paddingTop + paddingBottom;
offset += vscroll.width;
}

if (component.hasTextInput() == true) {
var size:Size = usableSize;
#if !pixijs
component.getTextInput().width = size.width - 4 - ((borderSize - 1) * 2);
component.getTextInput().height = size.height - 4 - ((borderSize - 1) * 2);
#end

component.getTextInput().width = size.width - 0 - ((borderSize - 1) * 2) - offset;
component.getTextInput().height = size.height - 0 - ((borderSize - 1) * 2);
}
}

Expand Down Expand Up @@ -248,6 +294,26 @@ private class ScrollToBottom extends Behaviour {
}
}

@:dox(hide) @:noCompletion
private class IconBehaviour extends DataBehaviour {
public override function validateData() {
var textarea:TextArea = cast(_component, TextArea);
var icon:Image = textarea.findComponent(Image, false);
if ((_value == null || _value.isNull) && icon != null) {
textarea.removeComponent(icon);
} else {
if (icon == null) {
icon = new Image();
icon.id = "textarea-icon";
icon.addClass("icon");
icon.scriptAccess = false;
textarea.addComponentAt(icon, 0);
}
icon.resource = _value.toString();
}
}
}

//***********************************************************************************************************
// Helpers
//***********************************************************************************************************
Expand Down
17 changes: 10 additions & 7 deletions haxe/ui/components/TextField.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,24 +104,27 @@ private class TextFieldLayout extends DefaultLayout {
private override function repositionChildren() {
var icon:Image = component.findComponent(Image, false);
var xpos:Float = paddingLeft;

var decorator = findComponent(Decorator);
var decoratorWidth:Float = 0;
if (decorator != null) {
decorator.left = _component.width - decorator.width - borderSize;
decorator.top = borderSize;
decoratorWidth = decorator.width;
}

if (icon != null) {
switch (iconPosition) {
case "left":
icon.left = xpos;
icon.top = (component.componentHeight / 2) - (icon.componentHeight / 2);
xpos += icon.componentWidth + horizontalSpacing;
case "right":
icon.left = component.componentWidth - icon.componentWidth - paddingRight;
icon.left = component.componentWidth - icon.componentWidth - paddingRight - decoratorWidth;
icon.top = (component.componentHeight / 2) - (icon.componentHeight / 2);
}
}

var decorator = findComponent(Decorator);
if (decorator != null) {
decorator.left = _component.width - decorator.width - borderSize;
decorator.top = borderSize;
}

if (component.hasTextInput() == true) {
component.getTextInput().left = xpos;
component.getTextInput().top = paddingTop + (component.componentHeight / 2) - ((component.getTextInput().height + paddingTop + paddingBottom) / 2);
Expand Down

0 comments on commit 97a7a4b

Please sign in to comment.