Hi All,

Currently I am working on a task that "*Flexibility to add/remove more
functions/buttons in the gadget title bar*".Previously we have distinct set
of 3 buttons/functions(configuration,maximize,remove) in gadget title
bar.By the task I am working on can have more than above three
buttons/functions those are custom buttons specific to each and every
gadgets add by gadget author.

These custom buttons are adding by gadget author through the configuration
file of gadget(Gadget.json) as below.

"toolbarButtons":{
  "custom":[
    {
      "action": "REFRESH",
      "image": "icon://gadget/date-picker/images/stamp.png"
    },
    {
      "action": "DOWNLOAD",
      "image": "icon://gadget/date-picker/images/wifi.png"
    }
  ],
  "default":{
    "maximize": false,
    "configuration": true,
    "remove": true
  }
}

*Faced Problem*
*============*

When adding more than 3 buttons/functions, the issue that I am facing is
those set of buttons are not present at the title bar it is situated just
below the title bar.You can find the image below.


​

In UI/UX perspective my finding is gadget title width is calculated as below

.gadget .gadget-heading > .gadget-title {
    width: calc(100% - 154px);
}


*The proposed solution==================*

We can have a extra property called width for each and every custom button
and we can get the addition(sum) of widths' of all custom buttons and can
subtract from 100% of width of title tool bar.

"toolbarButtons":{
  "custom":[
    {
      "action": "REFRESH",
      "image": "icon://gadget/date-picker/images/stamp.png",

      "width": "7px"

    }
  ],
  "default":{
    "maximize": false,
    "configuration": true,
    "remove": true
  }
}

.gadget .gadget-heading > .gadget-title {
    width: calc(100% - {Addition of widths});
}

*Limitations and problems of proposed solution above*
*============================================*

- For example in case of adding huge number of custom buttons(100 buttons)
what will happen to gadget title?
- Adding different size of button width size will have not proper
consistent gadget UI. It may different respect to gadget custom button
widths'.
- We cannot restrict gadget author to have distinct number of
buttons/functions(default functions/buttons 5).

Can anyone guide me on this and give me suggestions on "what would be a
better solution"?

Your suggestions highly appreciated.

-- 

*Thank You.*

*Rajeenthini Satkunam*

*Associate Software Engineer | WSO2*


*E:[email protected] <[email protected]>*

*M :+94770832823   *
_______________________________________________
Dev mailing list
[email protected]
http://wso2.org/cgi-bin/mailman/listinfo/dev

Reply via email to