User preference

Let's customize your Workspace

What are user preference?

Recoda Workspace is a JavaScript-based plugin that differs from the usual WordPress plugins in that it looks more like APP than a plugin. This means that Recoda Workspace does some things in a different way. WordPress plugins typically use backend settings to store customization data. Recoda Workspace, on the other hand, uses a hybrid approach so that for most options you have a live preview of what it looks like, and when you click Save it is saved to the database.
USER PROFILES (There are two options for user profiles)
  1. 1.
    Standard - common for all users
  2. 2.
    Custom - individual for each user

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 is this important? Let us say there are two people working on the same project. One is younger and working on his cool, huge 34-inch monitor, and the other is older and likes his 24-inch monitor, which is enough for him. The first user can adjust the panels and everything else to take advantage of the big screen. He may even want a smaller font size so he can see more code in the preview. The other user has a smaller screen and likes a more compact view and can use a more compact interface.
Because he is older, it hurts his eyes to read a font size of 13px when writing code and he prefers a larger font like 16px or even 18px. And on the other hand, one can use his fancy color theme and the other can use his color theme that best fits his style. The point of all this is that each user can have their own experience. And when you work 8-10 hours a day, you want the freedom to customize the interface to make the workflow more enjoyable. Workspace is here to make that possible.

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.
The reason we say this is because we want to be as transparent as possible with you. And because we care about performance, we have Stack Overflow's best answer on "How do you measure JavaScript performance?" with 2263 votes at the time of writing (link to method). And as you can see, it took 0.007 seconds (7ms) to get and set all the data needed. So we think that the benefits are worth this fraction of a second. Note that the data may vary depending on the environment and many other things, but you can see it's a pretty fast process.
Execution time of setting User Preference

Theme Preference

You can choose one of the existing theme options, you can choose a custom option and write your own, or you can choose the Respect API that we have set up with our friends at dplugins that respects Swiss Knife's theme. There are 2W and 3W themes. The difference between them is that with the 2W theme, the buttons and inputs have the same background color, which is more like the Oxygen theme.
With 3W, on the other hand, you can quickly distinguish between buttons and inputs because the buttons are lighter than the background and feel like they are floating on the background, while the inputs on the other hand are darker and feel like they are all on the surface.
Let us see what options are available 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:
/*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*/
This is used as main theme interface background color
Darker interface background color, this is used for inputs so they can be one step darker than interface
The Darkest background color, this is helper variable for certain cases when you need Darker shade on --oxy_bg-4
This is the one shade lighter background color than main interface, used for buttons on background color of --oxy_bg-3
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

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
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
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 a more compact texture panel, others like a larger indentation. You can choose between 0.5rem and 1.25rem.
Structure indentation: 0.5rem
Structure indentation: 1.25rem

Magnetic Trigger

OPTIONS => 250 | 200 | 150 | 100 | 50
What is a magnetic trigger? It is the area where the panel closes automatically. If you want to open the panel, you have to leave this area to open the panel.
On the other hand, it is very convenient when you want to close the panel, because you do not need to go to the edge of the screen, you just need to release a mouse click in this area to close the panel
Magnetic trigger: 250px (red area)
Magnetic trigger: 50px (red area)

Shortcuts hint

These options give you visual aids to help you get on board 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
If you drag panels, this is a temporary change. If you want to change the default panel width that is saved, you should set it up in the user preferences.
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

With 0.9.3, Workspace introduces this option for Oxygen to handle Canvas in a native way. By default, Canvas is in responsive mode, which allows you to display a preview of any width at the default breakpoint. That is, if you resize the panels so that Canvas is 500px wide, the web page will display as if it were on a 500px device. If you want to set it up so that you always have a preview over all breakpoints, you should set Auto Zoom. Then the zoom will be calculated every time the canvas is resized, so you will always see a desktop preview no matter how wide the canvas is.
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 the classic style was well received by most users, it could take up too much space on smaller screens.
The new Horizontal and Hover options are for smaller screens, and the Vertical option gives a little more room for brochures when working with multiple classes The None option hides it when you do not 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.
Margin/Padding Layout options overview

Command-line autorename

Options => None | ID change | First class
If you use the command line, you can enable some of these automations to speed up the workflow.
  • Option: Change ID If you change ID using the command line #newID, the active element will be named automatically
  • Option: First class When you add a first class to an element via the command line, the element is renamed in the Structure panel with the name of the first class.

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

Disable Selector Indicator Shrink

Added in version: 1.1.0
Sometimes you accidentally hover over the indicator and it covers the whole input field. You can disable this under Preference > Misc > Disable Selector Indicator Shrink (disabled)

Main Context menu (Right click menu)

Added in version: 1.1.0
Options: OFF | ON
Features: Change ID, Cut, Copy, Paste, Paste inside parent, Wrap with link, Wrap with div, Make re-usable, Duplicate, Delete
Main context menu

Reset Advanced

Added in version: 1.1.0
Options: OFF | ON
Yiu will have reset icons under Advanced menu, or quicker way is by doing Right click under Advantor menu.
Reset Advanced feature