Re: [Dev] How to set dynamic width size When adding custom buttons/functions to gadget title in toolbar Dashboard Server

2016-04-10 Thread Rajeenthini Satkunam 
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  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  > 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  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*

Re: [Dev] How to set dynamic width size When adding custom buttons/functions to gadget title in toolbar Dashboard Server

2016-04-04 Thread Jerad Rutnam 
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 
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  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 *
>>>
>>> *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 *
>
> *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
___
Dev mailing list
Dev@wso2.org
http://wso2.org/cgi-bin/mailman/listinfo/dev

Re: [Dev] How to set dynamic width size When adding custom buttons/functions to gadget title in toolbar Dashboard Server

2016-04-04 Thread Rajeenthini Satkunam 
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  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  > 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 *
>>
>> *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 *

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

Re: [Dev] How to set dynamic width size When adding custom buttons/functions to gadget title in toolbar Dashboard Server

2016-04-04 Thread Jerad Rutnam 
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 
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 *
>
> *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
___
Dev mailing list
Dev@wso2.org
http://wso2.org/cgi-bin/mailman/listinfo/dev

[Dev] How to set dynamic width size When adding custom buttons/functions to gadget title in toolbar Dashboard Server

2016-04-04 Thread Rajeenthini Satkunam 
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 *

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