[feature request] Preset browser search bar text in LAF

HISEnberg

@Christoph-Hart is it possible to change the text displayed in the search bar or the preset browser? Also the highlighting colour?

d.healey

@Christoph-Hart Maybe a job for CSS?

aaronventure

@d-healey is it possible to mix and match? text entry is one thing that could benefit from it.

I have been playing around with comboboxes lately and I caught up with your and Chris' talk on item height, which resulted in a unique function for LAF that just wants a return of the height instead of processing any graphics methods.

So maybe this can be done for text entry: the function just wants a return of a JSON object with various properties much like the ModalTextInput method which can be customized.

d.healey

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

is it possible to mix and match?

CSS and LAF? Yeah.

Christoph Hart

Yes the preset browser is definitely a strong contender to be customized with CSS (everything from positioning the columns to styling the scroll bars is covered by the current feature set of the CSS renderer so I just have to hook it up and assign custom class selectors to the elements of the preset browser), but I'm not sure how much you can do with the current state.

Christoph Hart

Alright, here we go:

https://docs.hise.dev/ui-components/floating-tiles/plugin/presetbrowser.html#css-styling

d.healey

@Christoph-Hart Oh nice!

d.healey

@Christoph-Hart You know the parameter dump thing you added for modules, what about a css selector dump for components?

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

53

1.9k

10.5k

91.6k