Hi Dakshika,UX Team,

Brief Description about the feature and current implementation
===============================================

Currently I am working on the feature "*Flexibility to add/remove more
functions/buttons in the gadget title bar", *that is giving more
flexibility to gadget author to add their custom buttons and hide/show
default buttons(configurations/maximize/remove) of the gadget title bar*.*You
can get more details from above replies as well.

- We need to show the disabled button/functions in design view and only
need to hide it from view mode of dashboard.

- We need to have a design for the indication of disabled buttons/functions
in design mode.Simply we can tell that it needs to give a proper impression
that the button/function will not be shown in view mode of dashboard.

- We need to have proper responsive User Interface in case of gadget author
adding more button/functions in gadget title bar.We came up with the
solution that we can add drop-down for these huge number of buttons.

As per offline discussions with Jerad,Sharon and Sinthuja we came up with
the idea to how to show the design and view level functions/buttons, how we
are going to show the disabled button in the design mode of dashboard and
drop-down list for gadget title bar functions/buttons.

Hope I have included all the points .@Jerad Please add if I have missed
anything.So it is really helpful that we can have quick meeting on these
above topics to proceed further implementation.



On Tue, Apr 5, 2016 at 9:37 AM, Jerad Rutnam <je...@wso2.com> wrote:

> Hi Rajeenthini,
>
> Yes, +1. We should have both options, passing an icon class or image icon.
> May be we can handle it by giving an extra key-value.
>
> e.g.
>
> icon: 'image' || 'css',
> image: 'url-path',
> css: 'fw fw-icon'
>
> Cheers!
> Jerad
>
>
> On Tue, Apr 5, 2016 at 9:30 AM, Rajeenthini Satkunam <rajeenth...@wso2.com
> > wrote:
>
>> Hi Jerad,
>>
>> Thank you for your prompt reply.I also have this concern that "passing an
>> icon image" as you mentioned above reply since we are maintaining set of
>> default icons.But IMHO we need to handle the situation like if the gadget
>> author need to add a totally new function/button which icon image is not
>> exist already in default icon set.
>>
>> Your suggestion would be appreciated.
>>
>> On Tue, Apr 5, 2016 at 8:59 AM, Jerad Rutnam <je...@wso2.com> wrote:
>>
>>> 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 <
>>> rajeenth...@wso2.com> 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:rajeenth...@wso2.com <rajeenth...@wso2.com>*
>>>>
>>>> *M :+94770832823 <%2B94770832823>   *
>>>>
>>>>
>>>
>>>
>>> --
>>> *Jerad Rutnam*
>>> *Software Engineer*
>>>
>>> WSO2 Inc.
>>> lean | enterprise | middleware
>>> M : +94 77 959 1609 | E : je...@wso2.com | W : www.wso2.com
>>>
>>
>>
>>
>> --
>>
>> *Thank You.*
>>
>> *Rajeenthini Satkunam*
>>
>> *Associate Software Engineer | WSO2*
>>
>>
>> *E:rajeenth...@wso2.com <rajeenth...@wso2.com>*
>>
>> *M :+94770832823 <%2B94770832823>   *
>>
>>
>
>
> --
> *Jerad Rutnam*
> *Software Engineer*
>
> WSO2 Inc.
> lean | enterprise | middleware
> M : +94 77 959 1609 | E : je...@wso2.com | W : www.wso2.com
>



-- 

*Thank You.*

*Rajeenthini Satkunam*

*Associate Software Engineer | WSO2*


*E:rajeenth...@wso2.com <rajeenth...@wso2.com>*

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

Reply via email to