Jemt / Fit.UI

Fit.UI is a JavaScript based UI framework built on Object Oriented principles
http://fitui.org
GNU Lesser General Public License v3.0
19 stars 7 forks source link

HTML Editor: Hide toolbar until focused #52

Closed FlowIT-JIT closed 4 years ago

FlowIT-JIT commented 5 years ago

Consider implementing support for hiding the toolbar in the HTML editor until the control gains focus. A quick and dirty approach could be using CSS:

/* Hide toolbar when control does not have focus */
div.FitUiControlInput[data-focused="false"] span.cke_top
{
    display: none;
}

/* Make content area assume full height when control does not have focus */
div.FitUiControlInput[data-focused="false"] div.cke,
div.FitUiControlInput[data-focused="false"] div.cke_inner,
div.FitUiControlInput[data-focused="false"] div.cke_contents
{
    height: 100% !important;
}

The example above does not work properly with the Maximize button though so it need improvements. Maximizing the control results in control changing height when focused/unfocused. Also, the outer height of the control varies a few pixels when focused/unfocused which is annoying.

An alternative approach, and certainly much more performant, is to completely avoid loading the HTML editor until focused.

FlowIT-JIT commented 4 years ago

There's a better solution to this which is described in #94