The active class of the positioner should be k-is-active but is not k-is-selected. Change back to k-is-active

See: joomlatools/joomlatools-framework#49

Indentation of menu items without children on first level is sub-optimal. Keep indentation the same as for items with children.

Remove double scrollbar becuse of overflow: auto on component wrapper. If you want an overflowing wrapper you should use k-flex-wrapper instead

Improve filter and search numberless label position

See: https://support.joomlatools.com/forums/topic/7034-document-category-tree-shows-loading-after-upgrade-to-docman-3-0-2#comment-38050

If the datepicker is loaded again we lose our custom options, so we should namespace it just like we do with tooltip, modal, etc.

• Get scopebar dropdown to work, refactor the thing
• Make all JS work for multiple elements on a page
• Add koowa.js to admin.js and make it work (table highlight, toolbar button states)
• All JS should be activated with .k-js-[action]
• Split main.js up in more files or rename it to something proper
• Tree is not looking like the one in DOCman

Add Bootstrap 4 grid / layout system to be used inside the different elements. Makes it possible to put stuff next to each other in an easy way

We're gonna need some sort of tabs, switcher, slider to be able to switch between content in the sidebar.

Should work with the small sidebar with user generated content / languages.

See: https://github.com/joomlatools/fileman/issues/314#issuecomment-304650173

Set UI in 4pixel grid. Normally we would choose the 8pixel grid but since our font size is 13px we're going to go for a 20px line-height.

Buttons and other elements like tabs, table rows etc should preferably be in 8pixel grid

To be able to use kodekit-ui easy inside other projects we're adding SCSS dependencies to kodekit itself instead of using bower/ node etc.

Changelog:

• Fixed: Moved select2 from node_modules to SCSS src folder

Only add z-index values when they are actually needed. In this case only add the z-index values to layout elements when the layout is transitioning. This makes sure that modals etc. inside layout elements will still render on top of backdrops that are loaded at the end of the document.

Styling for datepicker disabled

The right sidebar is not closing entirely anymore when swiping to close.

Refactor to use a jQuery plugin pattern so we can initialize as necessary

See:

We run tabsCalculateScroll in all resize events. However the function is only defined if $tabsScroller has a length above.

I found this plugin:

• http://elementqueries.com/
• https://github.com/tomhodgins/element-queries-spec

And ran some tests:
Empty benchmark page: http://yellowlab.tools/result/elfwjldi3t
Just loading the file itself and don't do anything yet: http://yellowlab.tools/result/elfwl7gd64
Add one simple element querie: http://yellowlab.tools/result/elfwzlgvp1
Add four simple element queries: http://yellowlab.tools/result/elfwzr2n9v

Loading the page without any interaction:

Resize from desktop to mobile and back to desktop (activating all 4 queries)

We can see some very long frames that can possible result in janky / slow pages. This repo is only 2 weeks old so perhaps we should test it again later? Or ask some performance questions?

I'm not really good enough with the timeline to extensively test what kind of effect this script has on the entire page...

While working with the UI we found a couple styling improvements:

• transparent background and no color for empty state to inherit parent styling
• Inherit + transparent background + color to utilities + add to docs
• Tab active / focus styling (remove default outline which looks like a border on active)
• Add option to add content to loader (flexbox change needed) + add to docs
• Add labels + add to docs
• Possibility to use loader inside buttons and tabs + add to docs

• Fix flexbox for source view
• Fix flexbow when coming back from fullscreen view

See: joomlatools/leadman#56

• The left sidebar should only collapse next to the toolbar/titlebar/header when it makes sense. For example in the list view the toolbar is next to the left sidebar so when expanding the sidebar (on small screens) the toolbar should move to the right. But on DOClink for example, the sidebar should expand below the title and the overlay shouldn't cover the titlebar/toolbar/header
• The right sidebar should be moved into the .k-component container. This way the sidebar is below the toolbar if one is present. Right sidebar should never be next to the main container (next to the toolbar/titlebar etc) because the right sidebar is extra info on top of the main content.
• Right sidebar should be able to always be toggleable, but when screen is not small it should be without the overlay. Just toggle like in Google docs.
• Toggle buttons should always be added to closest top bar available.

Complete markup:

<div class="k-wrapper k-js-wrapper">
    <div class="k-title-bar k-js-title-bar">
        Main title
    </div>
    <div class="k-content-wrapper">
        <div class="k-sidebar-left k-js-sidebar-left">
            Left sidebar
        </div>
        <div class="k-content k-js-content">
            <div class="k-toolbar k-js-toolbar">
                Toolbar
            </div>
            <div class="k-component-wrapper">
                <form class="k-component k-js-component k-js-grid-controller" action="" method="get">
                    Main content
                </form>
                <div class="k-sidebar-right k-js-sidebar-right">
                    Right sidebar
                </div>
            </div>
        </div>
    </div>
</div>

Get repo ready, cleanup, to start using versions

Todo after:

• Update FW
• Update docs on joomlatools.com using latest version (using grunt)

Improve optionlist molecule so contentclass will only be styled inside the optionlist class item

Changelog:

• Fixed: Sub-classes are now namespaced to avoid styling issues

The layout divs can only be placed in a particular order. We can add CSS errors (outline: 10px solid red; for example when an element is placed in a wrong order. For this we can use CSS3 selectors. .element:not(:first-child) for example

Use the shorter k: event prefix that is shared between all framework versions

See: joomlatools/joomlatools-framework#58

Improve forms

Changelog:

• Removed padding from first-child legend
• Made form-block a content-block
• Improved label styling + small inside label
• Created mixin for optionlist

• borders mixin only for layout, not for butons for example (or borders using box-shadow?)
• create extra border + margin/padding mixin to keep 4px grid??
• Compile separate JS files for UI JS?

Add a proper menu bar to add above your UI

Changelog:

• Added: Menu bar to modal demo
• Added: menu SCSS and variables
• Added: Menu JS
• Added: dark theme for k-title-bar

Add tabs layout so we can do things like this:

Changelog:

• Added: tabs to form demo
• Added: k-tabs-container to display tabs in a form properly
• Added: k-tabs-wrapper and .k-tabs-scroller for scrollable inline tabs
• Added: JS for scrollable tabs

The tabs container is not overflowing correctly

Changelog:

• Fixed: Correct overflowing for tabs

Check RTL styling properly

Add a demo folder to kodekit-ui to test new functionality

Changelog:

• added: demo pages

• Only open submenu when item has submenu
• Blur other menu items when hovering items on desktop

Changelog:

• Fixed: Active menu items blur when hovering other elements on desktop
• Fixed: Only "open" submenu when menu-item actually has a submenu

Initial development

See: joomlatools/joomlatools-framework#245

Investigate the use of foundation as the base for Kodekit UI.

Resources:

• https://foundation.zurb.com
• https://foundation.zurb.com/sites/docs/
• https://foundation.zurb.com/sites/docs/xy-grid.html (the new grid system)

@waseemsadiq

As a proof of concept, try to rebuild the list example: https://www.joomlatools.com/developer/ui/examples/list in foundation.
thttps://zeptojs.com/

The idea would be to keep the UI layout as documented and stick to the color scheme, but replace the layout with a foundation grid base and foundation base blocks.

@ercanozkaya

Foundation makes use of jQuery, we will need to investigate the jQuery compat issues we have in joomla and if a workaround we did with kQuery is possible for it.

More info: https://foundation.zurb.com/sites/docs/javascript.html

Loading a page using ajax pages can generate an error if the page has inline js. See: https://github.com/joomlatools/www.joomlatools.com/issues/932

• position: sticky; on <th> in webkit is working differently from all other browsers. This makes all table heads appear 40px lower than they should.
• Overflow on the component wrappers cause a visible overflow when being used inside content-area.

Resolve @import declarations inside the node_modules folder using https://github.com/sass/node-sass#includepaths

With relative paths it is not possible to use this repository as a dependency using Bower or NPM.

We need to start preparing for frontend UI. The first idea was to not touch Kodekit UI until the site UI was done but since there were a few bug fixes this didn't really work.

In this ticket we can start the transformation from admin only to admin and site UI. I'll change the folder structure and prepare for both but will leave site UI out until it's ready.

This way we won't have huge merge conflicts when the site UI is ready

http://styleguide.joomlatools.com/#/section/2.6 dropdown is not working.

Create a site UI that can be used for all extensions WP and Joomla

Add login screen

Changelog:

• Added: login demo page
• Added: Login SCSS and variables

Load the styled file input inside kquery so the code will run even if the JS file is loaded in the head of the page

Work on a v1.0.0 release.

• middlepane resize cookie width earlier in JS to avoid jump (and set with <style></style> on stopdrag instead of using style="")
• disable table click to open functionality by adding k-js-click-to-select class to the <table>
• Make menus and dragger available on AJAx (or reload them)
• 3column layout
• more flexible toggle menus (using [data-content] for button content.)
• Separate the UI JS code from the rest
• rewrite and improve touch swipe menus
• refactor layout/_top.scss
• improve scrolltab (make more standalone and fix when clicking)
• swipe menus classname refactor (is-open etc.). Each has it's own name now
• make possible to open left menu when right pane (in three pane layout) is open? Button is visible so it would be good to have it able to open
• flexbox form view with flexing wisywig (see: https://github.com/joomlatools/textman/issues/475)
• Put everything into 4pixel grid
• refactor all .k-is-open etc. classes to variable
• replace JS grid with inline-block(+js) > flexbox (+js) > CSS grid (no-js) system
• refactor button mixin (using class variables instead of k-is-open, check usage of .badge etc.)
• update normalize.css to 7.0.0
• mobile touchslide menu back in shows two active overlays? Very dark when sliding back (using touch)
• rename .k-off-canvas-menu-toggle-holder to .k-off-canvas-toggle-holder and .k-off-canvas-menu-toggle to .k-off-canvas-toggle
• new folder structure for SCSS
• rename menu-container to top? (not always a menu)
• remove flexbox > table fallback, it's 2018, cmon
• rename $k-btn to $k-button
• refactor $k-variables in mixins to unprefixed since they're local
• refactor variable names. All should be built-up the same
• cleanup unused styleguide code, living on joomlatools.com now
• remove k-title-bar--dark and k-title-bar--inline
• Get rid of @import "molecules etc. and import separate files in _core.scss
• add variables to include atoms, molecule etc. upon building

Variable names building:

$k-[molecule]-[modifier]-[child]-[type]-[state]-[style]: ... !default;

1. [molecule]: Name or short-name for the molecule / element you are styling
2. [modifier]: Does the molecule / element have a modifier? Place it second
3. [child]: just one level deep. distinguishing `$k-navigation-border` from `$k-naviagtion-item-border` and `$k-navigation-lin-border'
4. [type]: for example `small`, `big`, `bold`,  `class` etc.
5. [state]: States like `active`, `disabled` etc.
6. [style]: Name of the CSS style for example `background-image`, `line-height`, `z-indez` etc.

// examples

// [style] (for base variables)
$k-font-weight: bold !default 

// ([state])[type] (for base variables)
$k-active-class: .active !default;

// [type]-[style]
$k-small-line-height: 12px !default;

// [molecule]
$k-navigation: true !default;

// [molecule]-[style]
$k-navigation-background: white !default;

// [molecule]-[modifier]
$k-navigation-round: true !default;

// [molecule]-[modifier]-[style]
$k-navigation-round-border-radius: 4px !default;

// [molecule]-[child]-[style]
$k-navigation-item-background: white !default;

// [molecule]-[child]-[state]-[style]
$k-navigation-item-hover-background: white !default;

// [molecule]-[child]-[state]-[type]
$k-navigation-item-active-class: $k-active-class !default;

// [molecule]-[child]-[type]-[state]-[style]
$k-navigation-item-small-hover-background: grey !default;

// [molecule]-[modifier]-[child]-[type]-[state]-[style]
$k-navigation-round-item-small-hover-background: grey !default;

Todo after release:

• Rebuild fileman/code/administrator/components/com_fileman/views/filelink/tmpl/upload.html.php
• Adjust and check docman, fileman, logman and textman views

Create mixins for buttons so they can be used for other elements

Changelog

• Added mixins: button-default, button-link and button-size
• Added two default variables for active and disabled class

See: https://github.com/joomlatools/docman/issues/1121

Refactor the initialize logics to better support SPAs.