From 50a53309c678bddbedbde360382e5fb997711524 Mon Sep 17 00:00:00 2001 From: Robin Poort Date: Mon, 15 May 2017 12:19:12 +0200 Subject: [PATCH] #319: Styling --- web/administrator/log/jcontroller.log.php | 6 ++ .../templates/elysio/css/admin.css | 100 ++++++++++++------ .../elysio/html/com_menus/menus/default.php | 22 +--- .../html/com_templates/styles/default.php | 27 +---- .../layouts/joomla/searchtools/default.php | 46 ++++---- .../joomla/searchtools/default/bar.php | 38 ++++--- .../joomla/searchtools/default/filters.php | 99 +++++++++++++++++ .../joomla/searchtools/default/list.php | 6 +- .../templates/elysio/html/overrides.php | 32 +++++- .../templates/elysio/scss/admin.scss | 4 + .../elysio/scss/bootstrap/_bootstrap.scss | 4 - 11 files changed, 263 insertions(+), 121 deletions(-) create mode 100644 web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/filters.php diff --git a/web/administrator/log/jcontroller.log.php b/web/administrator/log/jcontroller.log.php index 50ae651c64..9c92db4736 100644 --- a/web/administrator/log/jcontroller.log.php +++ b/web/administrator/log/jcontroller.log.php @@ -7,3 +7,9 @@ 2017-05-09T16:04:45+00:00 INFO 127.0.0.1 controller Holding edit ID com_users.edit.user.951 Array ( [0] => 951 ) 2017-05-09T16:04:45+00:00 INFO 127.0.0.1 controller Checking edit ID com_users.edit.user.951: 1 Array ( [0] => 951 ) 2017-05-09T16:04:53+00:00 INFO 127.0.0.1 controller Releasing edit ID com_users.edit.user.951 Array ( ) +2017-05-15T09:06:38+00:00 INFO 127.0.0.1 controller Holding edit ID com_templates.edit.style.9 Array ( [0] => 9 ) +2017-05-15T09:06:38+00:00 INFO 127.0.0.1 controller Checking edit ID com_templates.edit.style.9: 1 Array ( [0] => 9 ) +2017-05-15T09:06:40+00:00 INFO 127.0.0.1 controller Releasing edit ID com_templates.edit.style.9 Array ( ) +2017-05-15T09:46:06+00:00 INFO 127.0.0.1 controller Holding edit ID com_users.edit.user.952 Array ( [0] => 952 ) +2017-05-15T09:46:06+00:00 INFO 127.0.0.1 controller Checking edit ID com_users.edit.user.952: 1 Array ( [0] => 952 ) +2017-05-15T09:46:12+00:00 INFO 127.0.0.1 controller Releasing edit ID com_users.edit.user.952 Array ( ) diff --git a/web/administrator/templates/elysio/css/admin.css b/web/administrator/templates/elysio/css/admin.css index dc0c8a280e..7cd3b38c37 100644 --- a/web/administrator/templates/elysio/css/admin.css +++ b/web/administrator/templates/elysio/css/admin.css @@ -6558,6 +6558,74 @@ body.koowa > .koowa { min-height: 100%; overflow: hidden; } /** Flexbox on .koowa */ @media (min-width: 300px) and (min-height: 391px) { .k-flexbox .koowa, .k-flexboxlegacy .koowa { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } } +.popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: left; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); white-space: normal; } + +.popover.top { margin-top: -10px; } + +.popover.right { margin-left: 10px; } + +.popover.bottom { margin-top: 10px; } + +.popover.left { margin-left: -10px; } + +.popover-title { margin: 0; padding: 8px 14px; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; } + +.popover-content { padding: 9px 14px; } + +.popover > .arrow, .popover > .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } + +.popover > .arrow { border-width: 11px; } + +.popover > .arrow:after { border-width: 10px; content: ""; } + +.popover.top > .arrow { left: 50%; margin-left: -11px; border-bottom-width: 0; border-top-color: #999999; border-top-color: rgba(0, 0, 0, 0.25); bottom: -11px; } + +.popover.top > .arrow:after { content: " "; bottom: 1px; margin-left: -10px; border-bottom-width: 0; border-top-color: #fff; } + +.popover.right > .arrow { top: 50%; left: -11px; margin-top: -11px; border-left-width: 0; border-right-color: #999999; border-right-color: rgba(0, 0, 0, 0.25); } + +.popover.right > .arrow:after { content: " "; left: 1px; bottom: -10px; border-left-width: 0; border-right-color: #fff; } + +.popover.bottom > .arrow { left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #999999; border-bottom-color: rgba(0, 0, 0, 0.25); top: -11px; } + +.popover.bottom > .arrow:after { content: " "; top: 1px; margin-left: -10px; border-top-width: 0; border-bottom-color: #fff; } + +.popover.left > .arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #999999; border-left-color: rgba(0, 0, 0, 0.25); } + +.popover.left > .arrow:after { content: " "; right: 1px; border-right-width: 0; border-left-color: #fff; bottom: -10px; } + +.tooltip { position: absolute; z-index: 1070; display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.4; opacity: 0; filter: alpha(opacity=0); } + +.tooltip.in { opacity: 0.9; filter: alpha(opacity=90); } + +.tooltip.top { margin-top: -3px; padding: 5px 0; } + +.tooltip.right { margin-left: 3px; padding: 0 5px; } + +.tooltip.bottom { margin-top: 3px; padding: 5px 0; } + +.tooltip.left { margin-left: -3px; padding: 0 5px; } + +.tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; background-color: #000; border-radius: 4px; } + +.tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } + +.tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; } + +.tooltip.top-left .tooltip-arrow { bottom: 0; right: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } + +.tooltip.top-right .tooltip-arrow { bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } + +.tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000; } + +.tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000; } + +.tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } + +.tooltip.bottom-left .tooltip-arrow { top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } + +.tooltip.bottom-right .tooltip-arrow { top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } + .k-ui-namespace { /* ========================================================================== Bootstrap 3 overrides / additions ========================================================================== */ /** Bootstrap 3 navbar overrides 1. Remove gradient 2. No border for a more flat design 3. No margin to connect navbar to toolbar and sidebar 4. Set a normal z-index 5. No shadows for a more flat design 6. Auto height for client logo 7. Align vertically middle to "reset" line-height */ /** No shadows on buttons */ /* Legend */ /* Radio styling */ /* Setting some spacing on Bootstrap rows */ /* Horizontal forms */ /* For the menu item accordions */ /* ========================================================================== Bootstrap 2 modal ========================================================================== */ } .k-ui-namespace * { box-sizing: border-box; } @@ -8030,38 +8098,6 @@ body.koowa > .koowa { min-height: 100%; overflow: hidden; } .k-ui-namespace button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; } -.k-ui-namespace .tooltip { position: absolute; z-index: 1070; display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.4; opacity: 0; filter: alpha(opacity=0); } - -.k-ui-namespace .tooltip.in { opacity: 0.9; filter: alpha(opacity=90); } - -.k-ui-namespace .tooltip.top { margin-top: -3px; padding: 5px 0; } - -.k-ui-namespace .tooltip.right { margin-left: 3px; padding: 0 5px; } - -.k-ui-namespace .tooltip.bottom { margin-top: 3px; padding: 5px 0; } - -.k-ui-namespace .tooltip.left { margin-left: -3px; padding: 0 5px; } - -.k-ui-namespace .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; background-color: #000; border-radius: 4px; } - -.k-ui-namespace .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } - -.k-ui-namespace .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; } - -.k-ui-namespace .tooltip.top-left .tooltip-arrow { bottom: 0; right: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } - -.k-ui-namespace .tooltip.top-right .tooltip-arrow { bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; } - -.k-ui-namespace .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000; } - -.k-ui-namespace .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000; } - -.k-ui-namespace .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } - -.k-ui-namespace .tooltip.bottom-left .tooltip-arrow { top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } - -.k-ui-namespace .tooltip.bottom-right .tooltip-arrow { top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; } - .k-ui-namespace .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; } .k-ui-namespace .label:empty { display: none; } diff --git a/web/administrator/templates/elysio/html/com_menus/menus/default.php b/web/administrator/templates/elysio/html/com_menus/menus/default.php index 5d19602773..aba66b6fb0 100644 --- a/web/administrator/templates/elysio/html/com_menus/menus/default.php +++ b/web/administrator/templates/elysio/html/com_menus/menus/default.php @@ -43,27 +43,7 @@
- - -
- - -
-
- - - - -
-
+ $this, 'options' => array('filterButton' => false))); ?>
diff --git a/web/administrator/templates/elysio/html/com_templates/styles/default.php b/web/administrator/templates/elysio/html/com_templates/styles/default.php index 9ea8b09a8e..01b416388e 100644 --- a/web/administrator/templates/elysio/html/com_templates/styles/default.php +++ b/web/administrator/templates/elysio/html/com_templates/styles/default.php @@ -26,31 +26,8 @@
- -
- - -
- - - - -
- - -
-
- - - -
-
- -
+ + $this)); ?>
diff --git a/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default.php b/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default.php index 4c473998ec..5f41df331f 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default.php @@ -16,7 +16,6 @@ // Set some basic options $customOptions = array( - 'filtersHidden' => isset($data['options']['filtersHidden']) ? $data['options']['filtersHidden'] : empty($data['view']->activeFilters), 'defaultLimit' => isset($data['options']['defaultLimit']) ? $data['options']['defaultLimit'] : JFactory::getApplication()->get('list_limit', 20), 'searchFieldSelector' => '#filter_search', 'orderFieldSelector' => '#list_fullordering' @@ -28,23 +27,32 @@ // Load search tools JHtml::_('searchtools.form', $formSelector, $data['options']); - ?> -
-
- Filter: -
-
-
    -
  • - -
    • -
-
- -
- - \ No newline at end of file + +
+ + +
+ + +
+ + + + + + + + +
diff --git a/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/bar.php b/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/bar.php index eb430a7734..7e77e804a3 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/bar.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/bar.php @@ -24,22 +24,28 @@ $searchButton = $data['options']->get('searchButton', true); $filters = $data['view']->filterForm->getGroup('filter'); + +// Add class to input field +$filters['filter_search']->class = 'k-search__field'; ?> + -
- - -
- - input; ?> - - -
- - -
+
+
+ + input; ?> + + +
+
+ + diff --git a/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/filters.php b/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/filters.php new file mode 100644 index 0000000000..d3e655f83d --- /dev/null +++ b/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/filters.php @@ -0,0 +1,99 @@ +filterForm->getGroup('filter'); +foreach ($filters as $field) +{ + if ($showonstring = $field->getAttribute('showon')) + { + $showonarr = array(); + foreach (preg_split('%\[AND\]|\[OR\]%', $showonstring) as $showonfield) + { + $showon = explode(':', $showonfield, 2); + $showonarr[] = array( + 'field' => $showon[0], + 'values' => explode(',', $showon[1]), + 'op' => (preg_match('%\[(AND|OR)\]' . $showonfield . '%', $showonstring, $matches)) ? $matches[1] : '' + ); + } + $data['view']->filterForm->setFieldAttribute($field->fieldname, 'dataShowOn', json_encode($showonarr), $field->group); + } +} + +// Load the form filters +$filters = $data['view']->filterForm->getGroup('filter'); +?> + +
+
+
+ +
+
+
+ +
+
+ +
+ +
+ + + + $field) : ?> + + getAttribute('dataShowOn')) + { + JHtml::_('jquery.framework'); + JHtml::_('script', 'jui/cms.js', false, true); + $showOn = " data-showon='" . $showOnData . "'"; + } + ?> +
> + input; ?> +
+ + + + + + +
+
+ + + diff --git a/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/list.php b/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/list.php index aed6756cec..8461fd0d8f 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/list.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/list.php @@ -14,10 +14,10 @@ // Load the form list fields $list = $data['view']->filterForm->getGroup('list'); ?> + + $field) : ?> -
- input; ?> -
+ input; ?> diff --git a/web/administrator/templates/elysio/html/overrides.php b/web/administrator/templates/elysio/html/overrides.php index af74b891c6..184fc2d64c 100644 --- a/web/administrator/templates/elysio/html/overrides.php +++ b/web/administrator/templates/elysio/html/overrides.php @@ -10,7 +10,10 @@ function classOverride($input) { $class = "k-icon-pencil"; break; case strpos($input, 'delete'); - $class = "k-icon-x"; + $class = "k-icon-trash"; + break; + case strpos($input, 'trash'); + $class = "k-icon-trash"; break; case strpos($input, 'refresh'); $class = "k-icon-reload"; @@ -18,6 +21,33 @@ function classOverride($input) { case strpos($input, 'options'); $class = "k-icon-cog"; break; + case strpos($input, 'default'); + $class = "k-icon-star"; + break; + case strpos($input, 'copy'); + $class = "k-icon-file"; + break; + case strpos($input, 'unpublish'); + $class = "k-icon-x"; + break; + case strpos($input, 'publish'); + $class = "k-icon-check"; + break; + case strpos($input, 'checkin'); + $class = "k-icon-task"; + break; + case strpos($input, 'unblock'); + $class = "k-icon-circle-check"; + break; + case strpos($input, 'apply'); + $class = "k-icon-task"; + break; + case strpos($input, 'save'); + $class = "k-icon-check"; + break; + case strpos($input, 'cancel'); + $class = "k-icon-x"; + break; } return $class; } \ No newline at end of file diff --git a/web/administrator/templates/elysio/scss/admin.scss b/web/administrator/templates/elysio/scss/admin.scss index f928f4b8a6..e4ee04b86c 100644 --- a/web/administrator/templates/elysio/scss/admin.scss +++ b/web/administrator/templates/elysio/scss/admin.scss @@ -13,6 +13,10 @@ $k-icon-path: '../fonts'; // Basic html and body setup @import "utilities/setup"; +@import "bootstrap-sass/assets/stylesheets/bootstrap/variables"; +@import "bootstrap-sass/assets/stylesheets/bootstrap/mixins"; +@import "bootstrap-sass/assets/stylesheets/bootstrap/popovers"; +@import "bootstrap-sass/assets/stylesheets/bootstrap/tooltip"; // Koowa namespaced styling .k-ui-namespace { diff --git a/web/administrator/templates/elysio/scss/bootstrap/_bootstrap.scss b/web/administrator/templates/elysio/scss/bootstrap/_bootstrap.scss index c357d5f3e0..48baf70d02 100644 --- a/web/administrator/templates/elysio/scss/bootstrap/_bootstrap.scss +++ b/web/administrator/templates/elysio/scss/bootstrap/_bootstrap.scss @@ -1,7 +1,4 @@ // Bootstrap 3 -@import "bootstrap-sass/assets/stylesheets/bootstrap/variables"; -@import "bootstrap-sass/assets/stylesheets/bootstrap/mixins"; - @import "bootstrap-sass/assets/stylesheets/bootstrap/scaffolding"; @import "bootstrap-sass/assets/stylesheets/bootstrap/panels"; @import "bootstrap-sass/assets/stylesheets/bootstrap/component-animations"; @@ -17,7 +14,6 @@ @import "bootstrap-sass/assets/stylesheets/bootstrap/buttons"; @import "bootstrap-sass/assets/stylesheets/bootstrap/media"; @import "bootstrap-sass/assets/stylesheets/bootstrap/close"; -@import "bootstrap-sass/assets/stylesheets/bootstrap/tooltip"; @import "bootstrap-sass/assets/stylesheets/bootstrap/labels"; // Overrides / additions