Docs
Search…
User preference
Let's customize your Workspace

What are user preference?

Recoda Workspace is JavaScript based plugin and what differentiate it from usual WordPress plugins is that it looks to be more APP like than plugin.
That means Recoda Workspace tackles with some things in different ways. WordPress plugins usually use backend settings to store customization data, Recoda Workspace on other hand is visible only in plugin area. Only thing that Recoda Workspace has common with plugins are few lines of PHP to enable Recoda Workspace when Oxygen Builder is active. There is no storing data in Data Base.
That means our way of storing data is on your machine via Local Storage API provided by browser.

Why not using Data Base?

First reason is security, with less plugins messing with Data Base there are less security concerns.
Second reason is that Recoda Workspace is development tool. So after development you can leave Recoda Workspace, deactivate or even uninstall without breaking any functionality. It is yours Workspace and it is up to you, we don't look to lock user and make them depend on one more thing, we are looking to provide freedom. And, yes we all like freedom very much.

What is Local Storage?

According to MDN:
The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.

What that means for you?

  1. 1.
    You can easy setup right from Oxygen Builder interface whole your Workspace.
  2. 2.
    If there are multiple users working on same project preference are unique for each
  3. 3.
    If there are multiple users working on same machine they can use even different browser and have unique setup
So why this is important? Because Let's say that we have two people working on same project, one is younger and working on his cool huge 34" monitor other is older and like his 24" monitor which works for him. First user can adjust panels and everything to take benefit of huge screen, he may even like to have smaller font-size so he can preview more code. Other user has smaller display and likes more compact view and he can utilize more compact interface. Because he is older, it hurts his eyes to read 13px font while writing code and he likes to have bigger font like 16px or even 18px. And on other hand one can use his fancy color theme, and other can use his color theme which suits best to his style.
Whole point of this, every user can have his unique experience. And if you work 8-10hr/day you want to have freedom over interface which make workflow more pleasurable. Workspace is here to provide that.

Are there any downsides?

Yes as always, it takes some time to execute and set up these it won't make it quicker, we won't lie.
OK, I know what you are thinking, speed, slowing, blah, blah.. Don't panic, keep reading.
Reason why we are stating this is that we want be transparent with you as much as we can. And we care about performance so we did measure according to Stack Overflow best answer how to measure JavaScript performance with 2263 votes at moment of writing (link to method). And as you can see it took 0.007 seconds (7ms) to get and set all needed data. So we think that all benefits are worth of that fraction of second. Note that data can vary depending on environment and many things, but you get it, it is pretty fast operation.
Execution time of setting User Preference

Theme Preference

You can choose One of existing theme option, you can write choose custom and write your own or choose Respect API which we have established with our friends from dplugins which will respect theme from Swiss Knife. There are 2W and 3W themes. Difference between them is that for 2W themes buttons and inputs have same background color which is more Oxygen native theme. On the other hand 3W help quickly distinguish what are buttons and input because buttons are lighter than background and feel like they are levitating on background, and inputs are on the other side darker and it feels that they are whole on interface.
Let's see what option are given to you:

Theme #1: Recoda Sleek

Theme #2: Recoda Designer

Theme #3: One Dark 3W

Theme #4: One Dark 2W

Theme #5: Dracula 3W

Theme #6: Dracula 2W

Theme #7: Classic Lighter

Theme #8: Classic Darker

Theme #9: Vodka

This is our legacy theme requested by users to stay as optional.

Theme #10: Custom

This is option if you like to have your own theme, we provided easy way (5 lines of CSS to that).
Basic theme options boilerplate:
:root[ws-theme="custom"]{
/*System colors*/
--oxy__bg-3:#404040 !important; /* The Main BG color*/
--oxy__bg-4:#5E5E5E !important; /* The Darker BG color*/
--oxy__bg-5:#6F6E6E !important; /* The Darkest BG color*/
--oxy__bg-2:#2B2B2B !important; /* The Lighter BG color*/
--oxy__bg-1:#1a1a1a !important; /* The Lightest BG color*/
}
VARIABLE
DESCRIPTION
--oxy_bg-3
This is used as main theme interface background color
--oxy__bg-4
Darker interface background color, this is used for inputs so they can be one step darker than interface
--oxy__bg-5
The Darkest background color, this is helper variable for certain cases when you need Darker shade on --oxy_bg-4
--oxy__bg-2
This is the one shade lighter background color than main interface, used for buttons on background color of --oxy_bg-3
--oxy__bg-1
This is the lightest background color. It is for handling exceptions like when some button is on --oxy_bg-2 so it can be one shade lighter

Color "Math" behind background colors:

Interface Background
Input Background
Clickable Background
--oxy_bg-3
--oxy_bg-2
--oxy_bg-2
--oxy_bg-2
--oxy_bg-2
--oxy_bg-1
--oxy_bg-4
--oxy_bg-5
--oxy_bg-3

Structure Panel Style

This option will provide you micro-theming options for structure panel.

Style #1: Classic

This option will at some improvemnts like new expand/collapse icons, line trackers like in dev tools, but it will respect in some way native Oxygen look of Structure Panel
Classic Panel

Style #2: Sleek

This option will provide you new minimalistic look of Structure Panel
Sleek Panel

Style #3: Turn OFF

This is not style exactly, and you can see that it look weird. This is made like this because maybe you like more structure panel improvements from other plugins like Swiss Knife so you can Turn OFF here and use other without collisions.
Turn OFF Panel Style

Code Editor font size

For some user default 13px coding font-size can be small. We have provided 13px-18px range so you can choose which size works best for you.
18px Code editor font-size

Panel docking

Options => OFF / LEFT / LEFT-SWAP
OPTION: LEFT
Some users use larger screens and mouse travel between left and right panel is huge. We have provided left dock options which should solve that issue and provide few other options. Because we have panels now next to each other some options like ADD+ and BlockPad Editor can now utilize space from both panels. And in native panels working with Stylesheets is not intuitive because you look what to edit at right and edit it on left. This way you are looking in sequence from left like in every Code Editor.
Left Panel docking
OPTION: LEFT-SWAP
Left-swap Panel docking

CL Class Highlighter

Command-line special indication mode for adding classes.
Command-line Class highlighter

Panelator position

Option: Topbar

Panelator in the Topbar area

Option: Sidepanel

Panelator in Sidepanel area

Structure indentation

OPTIONS => .5 | .75 | 1 | 1.25
Some people like more compact Structure Panel, other like to have bigger indentation you can choose from 0.5rem to 1.25rem.
Structure indentation: 0.5rem
Structure indentation: 1.25rem

Magnetic Trigger

OPTIONS => 250 | 200 | 150 | 100 | 50
What is magnetic trigger? It is Panel auto-close area. If you want to open panel you need to get from this area in order to open panel. On the other hand it comes very handy when you want to close panel because you don't need to go to the edge of screen, you just need to release mouse click in this area to close panel
Magnetic trigger: 250px (red area)
Magnetic trigger: 50px (red area)

Shortcuts hint

This options will give you visual helpers so you can onboard faster with Workspace shortcuts for panels, breakpoints and advanced options.
NOTE: In order to show correctly shortcuts, under User preference > Keyboard Layout you will need to choose your Keyboard Layout, default is QWERTY, other supported layouts are QWERTZ, AZERTY, Colemak DH
Shortcuts hint

Left/ Right Panel Default width

OPTONS => range from 250px to 500px
When you drag panels it is temporary change. If you want to change default panel width which will be remembered you should set up this using user preference.
Setting L/R Panel Default Width

Resizer Handle Width

OPTIONS => 5 | 10 | 15 | 20 | 25
This option will allow you to choose how wide resize handles will be.
Setting resize handle width

Left/ Right Panel Maximal Ratio

Because both panels are resizable, Workspace implements mechanism to prevent panels from overlapping. This ratio will setup what is maximal portion of screen space which can panel take. By default panel comes with (L:50% - R:50% ). Two edge cases which you can set up (L:70% - R:30%) and (L:30% - R:70%). Other ratios are up to you. And if you are not sure, leave it as 50-50 distribution.
Edge case (L:30% - R:70%)

Auto Zoom

OPTIONS=> OFF | ON
With 0.9.3 Workspace introduce this option which is Oxygen native way of handling Canvas. By default Canvas is in responsive mode which will allow you to preview of any width at default break-point. That means if you resize panels so Canvas is 500px it will preview webpage as on 500px device. If you want to lock it so you always have preview above all breakpoints you should set Auto Zoom and it will calculate Zoom on every Canvas resize event so you will always see desktop preview no matter how wide is Canvas.
Canvas preview with Auto Zoom ON

Panel UI Pack

OPTIONS => Houdini | None
Selector UI side by side options
Stylesheets UI options side by side

Canvas scroll style

Options => Normal | Tiny
Default Canvas Scrollbar can be to big on screens sizes of laptop so there is option to make them smaller by selecting Tiny option.
Tiny Canvas Scrollbar

Advantor style

OPTIONS => Classic | Vertical | Horizontal | Float | None
While Classic style worked for the most of the users, on smaller screens it could take out too much of space. New options Horizontal and Hover are designed for smaller screens, and the Vertical will provide little more space for propeties when you work with multiple classes. Option None will hide it, if you don't need it.
Advantor Style options side by side

Expand units

Options => OFF | ON
Some user prefer to have one click units selctions for faster workflow, if selected ON option, units will be expanded (where they can be).
If you drag/resize panel under 300px, units won't expand until panel is bigger then 300px.

Margin/Padding control style

Options => Classic | Column | Default
NOTE: This option will only work with Oxygen 4.0+ versions, as this new view is introduced in it.
With Oxygen Builder 4.0, Margin/Padding controls got new box look like in dev tools. While it looks really cool it, old view is better when you need place CSS var() or calc() inside it input, and Expanded units are only possible in classic view.
Margin/Padding Layout options overview

Command-line autorename

Options => None | ID change | First class
If you are using command-line, you can enable some of these automation in order to speed up workflow.
Option: ID change
When you change ID via command-line #newID command, this will autorename active element
Option: First class
When you add first class to an element via command-line it will rename that the element in structure panel with the first classes name.

Hide Sidebar Breadcrumb

Options => OFF| ON
Option OFF (Not hide)

Hide Settings Dropdown

Options => OFF| ON
This option is just for Oxygen 3.9 or less, in Oxygen 4.0 this dropdown does not exist

Background position presets

Group: Advanced Tabs
Options => Enable | Disable

Default units (video)
📹

VIDEO: Default units
There are two different groups which are acting like a layers to customize priority. You can choose Global to adjust which units you would like to change. Local units have higher priority so you could set global rem units and for width use % unit for Max-width.

Global units
🔴

Applies to all units (exception are defined Local units).
OPTIONS => default | rem | em | %

Local units
🟡

1) Margin => default px | rem | em | %
2) Padding => default px | rem | em | %
3) Width => default px | rem | em | %
4) Max-width => default px | rem | em | %
5) Font-size => default px | rem | em

Unit auto-detection (video)

Detect and change unit as you type. Supports unit detection and CSS function detection so you don't need type, click. Just type...
VIDEO: Unit auto-detection

CSS Variables suggestion (video)

While you type inside Oxygen Builder, you will get help with variables. Recoda gets all defined CSS variables and hints you if you start type name.
VIDEO: CSS Variables hints in input field

Disable Padding/Margin Drag

VIDEO: Disable Padding/Margin Drag