[feature request] Preset browser search bar text in LAF

Christoph Hart

@d-healey There's already a CSS debugger. If you've assigned a CSS LAF to a component you can right click and use Show CSS debugger, then you'll see this:

Current variable values:
{
  "bgColour": "#55FFFFFF",
  "itemColour": "#66333333",
  "itemColour2": "#FB111111",
  "textColour": "#FFFFFFFF"
}
==============================

/* CSS for component hierarchy: */

div 
 div 
  div 
   div 
    div 
     div 
      div 
       div 
        div 
         div 
          div 
           div 
            div 
             div 
              div 
               div 
                div 
                 div 
                  div 
                   div 
                    div 
                     button #b1 .scriptbutton

/** Component stylesheet: */
button #b1 .scriptbutton {
  background-color[]: 0xFFFF0000
  color[]: 0xFFFFFFFF
}


/** Inherited style sheets: */
button {
  background-color[]: 0xFFFF0000
  color[]: 0xFFFFFFFF
}

d.healey

@Christoph-Hart said in [feature request] Preset browser search bar text in LAF:

you can right click

Where do I right click, on the component?

Christoph Hart

@d-healey interface designer in edit mode.

d.healey

@Christoph-Hart Perfect, thank you

HISEnberg

@Christoph-Hart nice thank you for adding this! Personally I'm a tad rusty on CSS but it's fantastic that this is now integrated.

I always tell myself that if I improve my skills I could be more useful to the community.

Best,

Hisenberg

HISEnberg

Apologies, that is low hanging fruit and my jokes are better, but I am quite excited to explore the CSS integration into HISE

clevername27

@HISEnberg said in [feature request] Preset browser search bar text in LAF:

my jokes are better

…says 'HISEnberg".

Christoph Hart

but I am quite excited to explore the CSS integration into HISE

yup, the more people play around with it the earlier I can remove the "experimental" warning message...

HISEnberg

HiseSnippet 1442.3ocsW0uaaaCDmJIJn1acaAXO.Dd+SZfcpbbSVqC1VhSh2LVRqQbW6.JFJnknrHhLo.EUbL156zdDFvdgFP+ishhgtihVVVNNosFXJeXy6ye73cGO0UJbowwBIxp7SGGQQVepcuwbUvQADFG04Xj0mYeFIVQkXCoViiHwwTOjk0peulfUo0PoO+020hDR3tzbRHzyDLW5orgLUN0tG7irvv1DO5SYCmQ5GbPGWA+HQnHAvyp1NnHh6EjAzGSzhshM5GHwAHqsr2YGe2G537vFM10gPZ3QHOnNswin9646tqyib75uqC7ydHq0OwioDxdJhhFirVqkvabu.wHtwAOiEy5GR0Kpi5Ad1PtsHzSuE0TQGEvB85lEnhQfU5lG1V0D19R6yXdrozyCeeQJCbtFyF.sVoH7Vs.7peSvaAPxZFHslARaX2yUxhT4bz34Sr6vgSSeBbNMKTLxhV4dqYej.jfq1dH4BZaIrXpFatmiSUL7u6se4xvYUrBeIQhCweCNSIhm2oj9zvMqj9Q8JUw0cz+ApjqQT+YTY.UcjXXjfCK1rRT+JEDMj3OirtRJDpNU3RBOUHt3PtWaJ3LMd.A2NlBfMjwo8TiCo8BnTvhkKuU4esboPpB1F0hgjJFePS7NQWse4R9fgqMhxFDnZh6Cm66W9UZaAXGq0pOjBNPJR3d0bgC.YSMn1rVs9CLIpfmKUfghdkJmUegzCbpj3wRhahaj5SsGt+Vag6QIR2.beXWFqwKdq6W9qhMDAeigm2u6wlmTouQffm6wX6Efsh9DhHgITC0byooBhre11niOdrHASgTYrJflJYULrXDTliShAJArXbLMj5BI6aq2lLdThpX7MyYkVfmRoUiDxFvahco57QfXDjrAGk0ThnlXms2MM3lQLj5qxNjcIRpJK.NPRo7ofOMQYJrm.RlfCfWEr.f2r4TQlG9RpWdxvn.lhp8RkzbScl40xZgLVfYT+agY4x9IbCfD7GKTzmv27dZGCVFOOKe+ExSW6HEggT4BYqaBKuME2jmLrOUVExqfCnoBBMZJ18Z8OrtWtlR4YDTv6vYpmDQmr91a+hlzK.91O04Xhhna+MgFHWDUpXZ3XcL8R3xGSyvR1GSiu.RTf6Ql1rAtsSMo6so8W6PAQAIOOkAvlAHXM6n9nqxuh5aOX7zE+g7fQLOEbgjs0uYgPAoMQzqpZMEjFu+41ckT3PtkTLJlJQYUufsV+Mu4MuSaNHcYXN0K+8+cNp6nsrlT5Vdk+bEacGhJ5vXOxkzVIJkfWoI1mDFSqlw5jqhH7X33L9vXvNICutHoQa4MnuNuJ95VEN2MJTjWNcHWD1u.Sn4elVG54cCd4bJGth+FXdLTuotIllVnsHRfiRlLythboPBQO8HEEzpcRXXWhJHSfh6fI6pNPLyi1JsAYA9ONYnILpUqdJIy5mqSENGxdD.iWj1wzY6Fy8T8ijNP9WR8worX0gvUeSCqS7P0E8wTsLH6bwntldhen5MMn1R2XSuSeggwYB4jCh44jmBNOmr3703V9Un7N85bdKqW+2oUVyTfVxTfd2IEnoyTjVYdGay7E5pSaqxfViy9RQqBDRqjlsl6s+yqSookT2afD64C+NWMX1LrEpAKs9FarwaMywdsQtfg8DdIgDUwI.0yIOgATIVXrK8nUPtlZ7ryQ+QLVnysNV3GJD2vtKS4FrXLtxBvHzx8+CLNYX56ZehuObGaN.Wyt8OurSN+db+4hDcK+yHJISmKAU38fiZWJ3cNmFFqSqVQmUZV6j0GtGk6kt3cvyDl00qslvrdFSzPhqT7RWy0o5w0uSJE.S7zWsoD7NVvZbcT5UryFmGBu8vKccKZpqo3NKqhMVVEevxp3tKqh6srJ90KqhO78qn9k6NLQIFZJaPny5dR5EzVVmvIPFXZ1J5+.35xjYD

@Christoph-Hart @d-healey I am experimenting with this in order to edit the search bar in the preset browser but I am getting some inconsistent behaviour.

As I understand it the search bar 's selector is label. However, its ID selector, which should take precedence, is #search. I don't see #search as a supported id type in the CSS example docs

I pulled from the label stylesheet example and it works fine on a simple label, but not on the search bar.

When I edit the text it does change the background colour so it seems to partly work, but clearly I am missing something or it is not completely implemented?

Content.makeFrontInterface(600, 600);

const var l = Content.addLabel("Label1", 10, 10);
const var pb = Content.getComponent("pb");
const var laf = Content.createLocalLookAndFeel();

laf.setInlineStyleSheet("

*
{
	letter-spacing: 2px;
	font-weight: bold;
}

label 
{
	background-color: var(--bgColour);
	color: var(--textColour);
	border-radius: 3px;
	
}

/** Search bar style */
#search 
{
    background-color: var(--bgColour);       
    color: var(--textColour);                
    border-radius: 3px;
    //background: blue;
    //textColour: black;
}

/** If you edit the text, it will use this selector. */
input
{
	background: blue;
	textColour: black;
	text-align: center;
	padding-top: 0.5px;
	padding-left: 2px;
	caret-color: green;
}

/** Style the text selection with this selector. */
::selection
{
	background: red;
	color: white;
}
");

l.setLocalLookAndFeel(laf);
pb.setLocalLookAndFeel(laf);

HISEnberg

@Christoph-Hart is the #search actually suppose to be a class selector here (.search)? That would make more sense to me and it seems to work.

This is based on the preset browser documentation:
https://docs.hise.dev/ui-components/floating-tiles/plugin/presetbrowser.html

HISEnberg

@HISEnberg Hmm and I suppose a follow up to this is if mixing and LAFs is possible here (HISE's traditional LAF and CSS)?

[feature request] Preset browser search bar text in LAF

13

1.8k

10.4k

90.8k