Preferences

Sine comes with a whole new suite of tools regarding preference management. Let's check them out now!:

• Formatting (all types): One of the best, new features is text formatting. This means you can now have bold, italic, and underlined letters in your label property. ~ for underline, * for italic, and ** for bold. (You may also use two backslashes to just type a * or ~ sign.)

  [
    {
      "type": "checkbox",
      "label": "~My~ *cool* ***checkbox*** ~***with***~ **formatting**! \\*\\*Excluded from formatting\\*\\*"
    }
  ]

• Size (all types): You can now use a size property to edit the font size of all sorts of stuff! (Works the same as a font size property)

  [
    {
      "type": "text",
      "label": "My text",
      "size": "20px"
    }
  ]

• Text: Sine has a standalone text type for additional context and by using the combination of bold formatting and increased font sizes, you can create a header.

  [
    {
      "type": "text",
      "label": "**My Header**",
      "size": "20px"
    }
  ]

• Separators: And if you thought that headers weren't enough to keep your users on track, we have real separators to help too! These are also compatible with the label property to have text in your separator too.

  [
    {
      "type": "separator",
      "label": "Workspace Indicator", <-- Displayed inside of the separator.
      "property": "uc.show-workspace-indicator" <-- Yes, you can use the separator as a type of checkbox.
    }
  ]

• The border property (string only): If a user is inputting a color into a string input, usually they have to type it in and then check it out by seeing the usage of it in their browser. Using the border property, the user can type in their color and see it applied on the border around the string input live. Set the border property to value for it to have this behavior, you can also set it to a color to just have a static color.

  [
    {
      "type": "string",
      "label": "A string that bases its *border* around your input!",
      "border": "value" <-- Replaceable with #fff, rgb(25, 25, 25), etc.
    }
  ]

• The margin property (all types): In order to have advanced formatting and neatness, we have added the margin property. You can set this to 20px, 1rem, 20px 4px 8px 6px, etc. It works just like a normal margin CSS property.

  [
    {
      "type": "text",
      "label": "more text for testing!",
      "margin": "0 20px 3px 1px"
    }
  ]

• The conditions and operator properties (all types): Isn't it annoying that a setting has to display all the time? What if you could hide it when another setting is not equal to something or is equal to something? Well now you can using the conditions and operator properties! (operator defaults to OR and conditions can be nested):

  [
    {
      "type": "string",
      "label": "A hidden setting unless the **uc.essentials.position** setting is set to ~bottom~ and superpins border is set to both or pins",
      "conditions": [
        {"if": {"property":"uc.essentials.position","value":"bottom"}},
        {"not": {"property":"uc.essentials.position","value":"left"}},
        {
          "conditions": [
            {"if": {"property":"uc.superpins.border","value":"both"}},
            {"if": {"property":"uc.superpins.border","value":"pins"}}
          ],
          "operator": "OR"
        }
      ]
      "operator": "AND"
    }
  ]

  As you might have guessed, the operator property is the AND or OR condition, so whether or not the conditions should this and that or this or that. (&& or || in JS)
  As for the conditions property, it is an array that contains objects which contain if or not properties so if this or if not that. The conditions property is also nestable so it can have an object which contains more conditions and operator properties. (This is an advanced logical operators system so don't worry if you don't understand it right away.)

• The restart property (all types): When a user changes preferences that require the browser to restart to take effect, the user gets no indication. Well, that's what this property does. This property, when set to true, will let the user know to restart their browser when changing the value of the preference.

  [
    {
      "type": "checkbox",
      "label": "This preference requires a restart to take effect.",
      "restart": true
    }
  ]