Hi Rajeenthini, IMO I think we should handle the width from css end. I will help you on it. And have concern in passing an icon image, is this optional? And do we have an option of passing an icon class instead?
Regards, Jerad On Tue, Apr 5, 2016 at 7:33 AM, Rajeenthini Satkunam <[email protected]> wrote: > 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 <%2B94770832823> * > > -- *Jerad Rutnam* *Software Engineer* WSO2 Inc. lean | enterprise | middleware M : +94 77 959 1609 | E : [email protected] | W : www.wso2.com
_______________________________________________ Dev mailing list [email protected] http://wso2.org/cgi-bin/mailman/listinfo/dev
