Listview subitem buttons: HTML, and CSS/JSON

[itg-assistant]

Andrew Niese asked 2017-04-01 05:19:48 UTC

Hi, I'm tryiung to add a button in a listview subitem's cell. I understand it's best to do this with HTML.

Dim lvsiButton As New ListViewItem.ListViewSubItem
lvsiButton.AllowHtml = True
lvsiButton.Text = "Edit"
li.SubItems.Add(lvsiButton)
Me.lvIssues.Items.Add(li)

I have a multi-line CSS style of myButton from http://www.bestcssbuttongenerator.com ... which outputs as CSS.

The CSS Editor doc says the ThemeBuilder's CSS Editor needs it in JSON format.

• Where should I put it in the CSS of the theme? I have it at the top, between "name" and "fonts" presently

• Is there any good converter to get the CSS style in the JSON format needed? Editing by hand is tedious

• Have I missed anything? I can't get it to work. Thanks

Original CSS:

<span class="token selector">.myButton </span><span class="token punctuation">{</span>
	<span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span>inset 0px 1px 0px 0px #9acc85<span class="token punctuation">;</span>
	<span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span>inset 0px 1px 0px 0px #9acc85<span class="token punctuation">;</span>
	<span class="token property">box-shadow</span><span class="token punctuation">:</span>inset 0px 1px 0px 0px #9acc85<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span>-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b))<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span>-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%)<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span>-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%)<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span>-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%)<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span>-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%)<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span>linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%)<span class="token punctuation">;</span>
	<span class="token property">filter</span><span class="token punctuation">:</span><span class="token property">progid</span><span class="token punctuation">:</span>DXImageTransform.Microsoft.gradient(startColorstr=<span class="token string">'#74ad5a'</span>, endColorstr=<span class="token string">'#68a54b'</span>,GradientType=0)<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span>#74ad5a<span class="token punctuation">;</span>
	<span class="token property">border</span><span class="token punctuation">:</span>1px solid #3b6e22<span class="token punctuation">;</span>
	<span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span>
	<span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span>
	<span class="token property">color</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span>
	<span class="token property">font-family</span><span class="token punctuation">:</span>Arial<span class="token punctuation">;</span>
	<span class="token property">font-size</span><span class="token punctuation">:</span>13px<span class="token punctuation">;</span>
	<span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span>
	<span class="token property">padding</span><span class="token punctuation">:</span>6px 12px<span class="token punctuation">;</span>
	<span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.myButton:hover </span><span class="token punctuation">{</span>
	<span class="token property">background</span><span class="token punctuation">:</span>-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a))<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span>-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%)<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span>-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%)<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span>-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%)<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span>-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%)<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span>linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%)<span class="token punctuation">;</span>
	<span class="token property">filter</span><span class="token punctuation">:</span><span class="token property">progid</span><span class="token punctuation">:</span>DXImageTransform.Microsoft.gradient(startColorstr=<span class="token string">'#68a54b'</span>, endColorstr=<span class="token string">'#74ad5a'</span>,GradientType=0)<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span>#68a54b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.myButton:active </span><span class="token punctuation">{</span>
	<span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
	<span class="token property">top</span><span class="token punctuation">:</span>1px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

WiseJ JSON conversion attempt

"myButton": {
"-moz-box-shadow": "inset 0px 1px 0px 0px #9acc85",
"-webkit-box-shadow": "inset 0px 1px 0px 0px #9acc85",
"box-shadow": "inset 0px 1px 0px 0px #9acc85",
"background": "-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b))",
"background": "-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%)",
"background": "-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%)",
"background": "-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%)",
"background": "-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%)",
"background": "linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%)",
"filter": "progid: DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b', GradientType=0)",
"background-color": "#74ad5a",
"border": "1px solid #3b6e22",
"display": "inline-block",
"cursor": "pointer",
"color": "#ffffff",
"font-family": "Arial",
"font-size": "13px",
"font-weight": "bold",
"padding": "6px 6px",
"text-decoration": "none"
}

"myButton:hover": {
"background": "-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a))",
"background": "-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%)",
"background": "-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%)",
"background": "-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%)",
"background": "-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%)",
"background": "linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%)",
"filter": "progid: DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a', GradientType=0)",
"background-color": #68a54b
}
"myButton:active": {
"position": "relative",
"top": "1px"
}

[itg-assistant]

Luca answered 2017-04-01 16:24:27 UTC

Hi Andrew,

You don't have to convert css to json. That is necessary only if you want to add custom css to a wisej theme in relation to a widget. See the material theme, it adds a pseudo element to create the animated underline. Everything in Wisej is ultimately standard html and css so you can simply add a css file to your project and either reference it in the starting page (usually Default.html) or add it as an embedded resource.

When you add it as an embedded resource you also have to uncomment (or add) the WisejResources attribute in AssemblyInfo to let Wisej bundle the css files.

I have attached a sample project that shows both approaches. You can remove one of the two. I also added the role attribute to the button html. You can see in the sample that you can easily detect clicks on inner html elements.

HTH

Best,

Luca

[itg-assistant]

Andrew Niese answered 2017-04-01 18:11:51 UTC

Brilliant, easier than I thought. Thank you so much!