How add text to button with type 'SEND_ACTION'?

[Ilya]

Hello.

I want to create a button near gmail send button with text (not icon).

Can I add some text on this button or get button classes?

[Ilya]

Now I add iconClass: 'my-class' and find my button by iconClass.

[Omar Ismail]

hi Ilya, if your application is meant to be used externally (i.e. it's not just for your or your company) I highly recommend against doing this. For 2 main reasons:

1. goes against the SDK's and Gmail's design principles. The SDK is optimized to handle multiple SDK extensions installed and if every extension wanted to do something similar it would make the compose window insane and ruin it for everybody.

2. Using a selector and modifying the element directly is brittle. We may change the DOM structure at any time, and that's precisely what the SDK is trying to shield you from.

What are you trying to do that the text is so much more valuable than an icon? My guess is that your users will be fine with an icon. Remember you can add a title to the button so when users hover over it they see a tooltip right away.

ᐧ

Omar

On Wed, Mar 30, 2016 at 3:28 AM, Ilya <moscowb...@gmail.com> wrote:

Now I add iconClass: 'my-class' and find my button by iconClass.

--
You received this message because you are subscribed to the Google Groups "InboxSDK" group.
To unsubscribe from this group and stop receiving emails from it, send an email to inboxsdk+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/cb49fb31-1ab2-47ff-a307-6aa8bb63b201%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Ilya]

Thanks!

[Ajay Goel]

Omar and Ilya,

Just want to chime in here. I admit that I too wanted to add text (and in my case, an icon too) to a SEND_ACTION button, so I used a CSS hack to do so. I have two extensions that are using Inbox SDK, Wordzen and GMass. Here is a screenshot of how my buttons look next to the normal Send button:

https://www.dropbox.com/s/51lhsl670cxhqnp/Screenshot%202016-03-31%2012.46.27.png?dl=0

And actually, each extension uses two buttons, both of SEND_ACTION types: one for the main button and another for a Settings panel I created using "hasDropdown: true" on the button with the little triangle on it.

I know it's not the recommended practice, but I really wanted my buttons to be labeled with text and not require the user to hover over them to see the text. Feel free to reach out if anyone would like further info on how I did this.

ajay

On Thursday, March 31, 2016 at 6:34:00 AM UTC-5, Ilya wrote:

Thanks!

[Ajeet Singh Chauhan]

Hello Ajay sir,

I want to know how you did this? please guide me.

[Ajay Goel]

I'm doing it with CSS. Here is the CSS file that is part of my extension. Note the ":after" designation where I set the text:

.myGclass {

background-color: red;

width: 70px;

text-align: left;

letter-spacing: 1px;

padding-left: 3px;

background-image: url("https://www.gmass.co/images/gmass_button_icon-ver2.png");

background-position: right center;

background-repeat: no-repeat;

}

.myGclassMini {

background-color: red;

width: 24px;

text-align: left;

letter-spacing: 1px;

padding-left: 3px;

background-image: url("https://www.gmass.co/images/gmass_button_icon-ver2.png");

background-position: right center;

background-repeat: no-repeat;

}

.myGclassSmall {

width: 19px;

background-color: #c42329;

margin: 0px 0px 0px 0px;

background-image: url("https://www.gmass.co/images/gmass_button_options-ver3.png");

background-position: center center;

background-repeat: no-repeat;

}

.myGclass:after{

   content: "GMass"; 

}​

Ajay Goel

Wordzen - We write your emails for you

GMass - Powerful email marketing inside Gmail

Follow me on Twitter!

--
You received this message because you are subscribed to a topic in the Google Groups "InboxSDK" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/inboxsdk/pxbN1yjaSgU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to inboxsdk+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/956c22c8-ec95-41f2-a867-e82c6339629b%40googlegroups.com.