Skip to content

Hybrid left/right alignment #136

@Al4He6

Description

@Al4He6

V32 Controls
Could controls be aligned left/right better?
For example there is no indent on Text,
but there is on checkbox

var results,ddn
export class Main extends App    {
        onStart()        {
            ui.setThemeColor("red","green")
 //           ui.setThemeColor("white","green")
            alert(JSON.stringify(ui.theme))
            this.main = ui.addLayout( "main", "Linear", "Top,horizontal", 1, 1 )
            var left = ui.addLayout(this.main,"linear","top,vertical,left",0.5,1)
            var apb = ui.addAppBar(left,"AppBar","primary,relative")
            var butlay = ui.addLayout(left,"linear","horizontal")
//            butlay.setChildMargins(0,0,0,0)
            var btn = ui.addButton(butlay,"Button","secondary,keepcase")
  //         var btn2 = ui.addButton(butlay,"contained","contained")
  //         var btn3 = ui.addButton(butlay,"outlined","outlined")
  //         var btn4 = ui.addButton(butlay,"text","primary,text")
            var btn5 = ui.addButton(butlay,"menu","icon,outlined,keepcase")
            btn5.tooltip="Button"
            btn5.toolTipPosition = "left"
            var laychp = ui.addLayout(left,"linear","horizontal")
            var chp = ui.addChip(laychp,"Chip","primary")
            var chp2 = ui.addChip(laychp,"outlined","primary,outlined")
//            var ddnlay = ui.addLayout(left,"linear","horizontal")
            var bs="dotted,dashed,solid,double,groove,ridge,inset,outset"
            ddn = ui.addDropdown(left,bs,"primary,keepcase")
     //       var ddn3 = ui.addDropdown(ddnlay,"out,lined","outlined")
     //       var ddn2 = ui.addDropdown(ddnlay,"cont,ained","contained")
            var fab = ui.addFAB(left,"add","primary")
            var txt = "filter_1:List:image,filter_2:baker:folder"
            var lst = ui.addList(left,txt,"icon,primary")
            lst.setItemPadding(0,0,0,0)
            var img = ui.addImage(left,"ds:/Sys/Img/BlueBack.jpg","",0.25,0.05)
            img.setOnLoad(function() {
              alert("pixelcolor " + img.getPixelColor(5,5,"rgb"))
            })
            var sellay = ui.addLayout(left,"linear","horizontal")
            var stx= ["Sel","ect"]
            var sel = ui.addSelect(sellay,stx,"standard,primary")
            sel.value = 0
            var sel2 = ui.addSelect(sellay,"out,lined","outlined")
            sel2.value = 0
            var sel3 = ui.addSelect(sellay,"fil,led","filled")
            sel3.value = 0
            var skb = ui.addSlider(left,10,"primary",0.9)
            var txtlay = ui.addLayout(left,"linear,","horizontal")
            var txt1 = ui.addText(txtlay,"Text","primary,h5")
            var txt2 = ui.addText(txtlay,"button","button")
            var txt3 = ui.addText(txtlay,"caption","caption")
            var txta = ui.addText(txtlay,"menu","primary,icon")
            var txelay = ui.addLayout(left,"linear","horizontal")
            var txe = ui.addTextField(txelay,"TextField","Primary,0.9")
  //          var txe2 = ui.addTextField(txelay,"outlined","outlined")
  //          var txe3 = ui.addTextField(txelay,"filled","filled")
            var navs = [["Bottom","favorites"],["Navbar","folder"]]
            var bnb = ui.addBottomNavbar(left,navs,"",0.9)
 
            var web = ui.addWebView(left,"https://www.agco.com")
 //           var web = ui.addWebView(left,"https://google.com")
              
            var right = ui.addLayout(this.main,"linear","vertical,top,left",0.5,1)
            var swt = ui.addSwitch(right,"Switch","Primary,left")
            var swt2 = ui.addSwitch(right,"Switch","Primary,right")
            var swf = [["menu","Switch"],["folder","Group"]]      
            var swg = ui.addSwitchGroup(right,swf,"icon,Primary",0.90)
            var chk = ui.addCheckbox(right,"Checkbox","Primary")
            var ctx = ["CheckBox","Group"]
            var ckg = ui.addCheckboxGroup(right,ctx,"primary")
            var rdg = ui.addRadioGroup(right,"radio,group","Primary")
            var atx = ["Accordion"]
            var btx = ["Button","Group"]
            var btg = ui.addButtonGroup(right,btx,"primary,keepcase")
            btg.toolTips="tool,tips"
 //           var bti = ui.addButtonGroup(right,["cont","ained"],"contained")
//            var btj = ui.addButtonGroup(right,["out","lined"],"outlined")            
//            var btk = ui.addButtonGroup(right,["te","xt"],"text")            
//            var bty = ["menu","folder"]
//            var bth = ui.addButtonGroup(right,bty,"icon")
            var acc= ui.addAccordion(right,atx)
            var sty = ["Stepper","Info"]
            var stp = ui.addStepper(right,sty)
            var div = ui.addDivider(right,0.6,"primary")

           var prg = ui.addProgress(right,50,"linear,Primary",0.9,0.05)
           var pri = ui.addProgress(right,50,"linear,Secondary",0.9,0.05)
           var prh = ui.showProgressDialog("progress dialog","autocancel")
//           prh.setOnClose(touched)

            var scr = ui.addLayout(right,"linear","horizontal,scrollx,left",0.9)
            var t1 = ui.addText(scr,"ScrollText1 ")
            var t2 = ui.addText(scr,"ScrollText2 ")
            var t3 = ui.addText(scr,"ScrollText3 ")
            var t4 = ui.addText(scr,"ScrollText4 ")

        var content = {
            bodyTitle: "Card Title",
            bodyText: "Card Text",
            actions: ["Read more"]
        };
        this.crd = ui.addCard(right, content, "primary", 0.8);
       
            apb.setOnTouch(touched)
            btn.setOnTouch(touched)
            chp.setOnTouch(touched)
            ddn.setOnTouch(touched)
            fab.setOnTouch(touched)
            lst.setOnTouch(touched)
            img.setOnTouch(touched)
            sel.setOnTouch(touched)
            skb.setOnTouch(touched)
            swt.setOnTouch(touched)
            txt1.setOnTouch(touched)
            txe.setOnTouch(touched)
            bnb.setOnTouch(touched)
            web.setOnTouch(touched)
            right.setOnTouch(function(pos){alert(JSON.stringify(pos));})
            rdg.setOnTouch(touched)            
            chk.setOnTouch(touched)
            acc.setOnTouch(touched)
            btg.setOnTouch(touched)
            ckg.setOnTouch(touched)
//            stp.setOnTouch(touched)            
            div.setOnTouch(touched)      
            swg.setOnTouch(touched)
            prg.setOnTouch(touched)

btn.setOnLongTouch(longtouch)
/*
img.setOnLongTouch(longtouch)
*/
///            right.setOnLongTouch(function(pos){alert(JSON.stringify(pos));})

///lst.setOnLongTouch(longtouch)
/*
txt.setOnLongTouch(longtouch)
*/

/*
  bnb.setOnChange(changed)
 ckg.setOnChange(changed)
 */
 ddn.setOnChange(changed)
 /*
 rdg.setOnChange(changed)
 skb.setOnChange(changed)
*/ stp.setOnChange(changed) /*
 swg.setOnChange(changed)
 txe.setOnChange(changed)
 */
 sel.setOnChange(changed)

 lst.setOnSelect(selected)
 skb.setOnSelect(selected)
// ctx.setOnChange(changed)
 rdg.setOnChange(changed)
 swg.setOnChange(changed)

// lst.setOnAction(function(icon,index){alert("Action "+icon+" "+index);})

this.crd.setOnAction(touched)
this.crd.setOnHeaderAction(touched)

    } // onstart
    
 } // class
 
function touched(p1,p2,p3,p4,p5) {
  results = "Touched\n"
  addon(this.type,"type")
  if (typeof p1 != "undefined") addon(JSON.stringify(p1),"parameter 1")
  if (typeof p2 != "undefined") addon(JSON.stringify(p2),"parameter 2")
  if (typeof p3 != "undefined") addon(JSON.stringify(p3),"parameter 3")  
  if (typeof p4 != "undefined") addon(JSON.stringify(p4),"parameter 4")
  if (typeof p5 != "undefined") addon(JSON.stringify(p5),"parameter 5")
  addon(this.options,"options")
  addon(this.variant,"variant")
  addon(this.size,"size")
  addon(this.color,"color")
  addon(this.height,"height")
  addon(this.left,"left")
  addon(this.width,"width")
  addon(this.top,"top")
  addon(this.absHeight,"absHeight")
  addon(this.absLeft,"absLeft")
  addon(this.absWidth,"absWidth")
  addon(this.absTop,"absTop")
  addon(this.backColor,"backColor")
  addon(this.backImage,"backImage")
  addon(this.badge,"badge")
  addon(this.badgeColor,"badgeColor")
  addon(this.border,"border")
  addon(this.borderColor,"borderColor")
  addon(this.borderStyle,"borderStyle")
  addon(JSON.stringify(this.cornerRadius),"cornerRadius")
  addon(this.disabled,"disabled")
  addon(this.parent.type,"parent")
  addon(this.text,"text")
  addon(this.value,"value")
  addon(JSON.stringify(this.list),"list")
  addon(this.visibility,"visibility")
  addon(this.isvisible,"isVisible")
  addon(this.textColor,"textColor")
  addon(this.textSize,"textSize")
  addon(this.textWeight,"textWeight")  
  addon(this.fontFile,"fontFile")
  addon(this.opacity,"opacity")
  addon(this.rotation,"rotation")
  addon(this.tooltip,"tooltip")
  addon(this.tooltipPosition,"tooltipPosition")
  addon(this.elevation,"elevation")
  addon(this.outlined,"outlined")
  addon(JSON.stringify(this.margins),"margins")
  addon(JSON.stringify(this.padding),"padding")
  addon(JSON.stringify(this.itemPadding),"itemPadding")
  addon(JSON.stringify(this.getPosition()),"getPosition")
  alert(results)
//  this.color="secondary"
//  this.variant=""
//  this.size="medium"
  this.backColor="silver"
  this.backColor="#99999999"
  this.textColor="yellow"
  this.textColor1="#9900ff00"
  this.textColor2="#999999"
  this.border=5
  this.borderColor="blue"
  this.borderStyle=ddn.value
  //  this.setBorder(5,5,5,5,"red","dashed")
  this.cornerRadius=10
  this.text="changed"
  this.tooltip="tip"
  this.opacity = 0.5
  this.rotation = 0
  this.margins=0.05
  this.padding=0.05
//  this.disabled = true
 } // touched
 
function addon(value,text) {
results += text + ":" + value + "\n"
} // addon

function changed(value,event) {
   results = "Change\n"
   addon(value,"value")
   addon(event,"event")
   alert(results)
   alert(this.absHeight)
//   this.disabled=true
} // changed

function selected(value,event) {
   results = "Select\n"
   addon(value,"value")
   addon(event,"event")
   alert(results)
//   this.disabled=true
} // selected

function longtouch(p1,p2,p3,p4,p5) {
   results = "Longtouch\n"
  if (typeof p1 != "undefined") addon(JSON.stringify(p1),"parameter 1")
  if (typeof p2 != "undefined") addon(JSON.stringify(p2),"parameter 2")
  if (typeof p3 != "undefined") addon(JSON.stringify(p3),"parameter 3")  
  if (typeof p4 != "undefined") addon(JSON.stringify(p4),"parameter 4")
  if (typeof p5 != "undefined") addon(JSON.stringify(p5),"parameter 5")
   addon(this.type,"type")
   alert(results)
//   this.disabled=true
} // longtouch

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions