From f2e174c233c6a1ca1bd09feaa3dc3c8fffbf3775 Mon Sep 17 00:00:00 2001 From: Ilja Tihhanovski Date: Thu, 7 Jul 2016 12:44:02 +0300 Subject: [PATCH] #46 --- classes/Application.php | 4 + classes/UIHelper.php | 6 +- classes/ui/AbstractUIModule.php | 48 ++++++- ui/squared/classes/SquaredMainMenu.php | 78 +++++++++++ ui/squared/classes/SquaredToolbar.php | 19 +++ ui/squared/{ => classes}/SquaredUIModule.php | 0 ui/squared/classes/SquaredUserMenu.php | 22 +++ ui/squared/html/frontpage.php | 26 ++-- ui/squared/index.php | 10 +- ui/squared/js/mainMenu.js | 15 +- ui/squared/styles.css | 129 +++++++++++++++--- .../SquaredMainMenu.php | 2 +- ui/squared_v1/SquaredUIModule.php | 5 + ui/squared_v1/html/frontpage.php | 62 +++++++++ ui/squared_v1/html/pagefinish.php | 5 + ui/squared_v1/html/pagestart.php | 7 + ui/squared_v1/index.php | 9 ++ ui/squared_v1/js/mainMenu.js | 11 ++ ui/squared_v1/styles.css | 122 +++++++++++++++++ 19 files changed, 517 insertions(+), 63 deletions(-) create mode 100644 ui/squared/classes/SquaredMainMenu.php create mode 100644 ui/squared/classes/SquaredToolbar.php rename ui/squared/{ => classes}/SquaredUIModule.php (100%) create mode 100644 ui/squared/classes/SquaredUserMenu.php rename ui/{squared => squared_v1}/SquaredMainMenu.php (86%) create mode 100644 ui/squared_v1/SquaredUIModule.php create mode 100644 ui/squared_v1/html/frontpage.php create mode 100644 ui/squared_v1/html/pagefinish.php create mode 100644 ui/squared_v1/html/pagestart.php create mode 100644 ui/squared_v1/index.php create mode 100644 ui/squared_v1/js/mainMenu.js create mode 100644 ui/squared_v1/styles.css diff --git a/classes/Application.php b/classes/Application.php index 9a3642e..4164fd4 100644 --- a/classes/Application.php +++ b/classes/Application.php @@ -913,6 +913,10 @@ public function getDefaultDefines() "L3RD_FONT_AWESOME_CSS" => L3RD_WEB . "font-awesome/css/font-awesome.min.css", + "L3RD_METISMENU_JS" => L3RD_WEB . "metisMenu/metisMenu.min.js", + "L3RD_METISMENU_CSS" => L3RD_WEB . "metisMenu/metisMenu.min.css", + //"L3RD_BOOTSTRAP_CSS" => "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css", + //"L3RD_BOOTSTRAP_JS" => "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js", "SETUP_CSS_MAIN" => WFW_WEB . "ui/wfw.css", "SETUP_HOTKEYS" => L3RD_WEB . "jquery.hotkeys.js", "SETUP_3RD_XLS" => L3RD_ROOT . "phpexcel/Classes/PHPExcel.php", diff --git a/classes/UIHelper.php b/classes/UIHelper.php index 427c50a..342e06b 100644 --- a/classes/UIHelper.php +++ b/classes/UIHelper.php @@ -27,7 +27,9 @@ public function includeStyles() //SETUP_3RD_COMBOGRID_CSS, //combogrid SETUP_JQUERY_UI_CSS, app()->url("resources/ui.css"), - SETUP_3RD_MULTISELECT_CSS + SETUP_3RD_MULTISELECT_CSS, + L3RD_METISMENU_CSS, + //L3RD_BOOTSTRAP_CSS, ); foreach ( $styles as $src) echo ""; @@ -43,6 +45,8 @@ public function includeScripts() SETUP_HOTKEYS, SETUP_COMBOGRID, SETUP_3RD_MULTISELECT_JS, + L3RD_METISMENU_JS, + //L3RD_BOOTSTRAP_JS, WFW_WEB . "js/app.js", WFW_WEB . "js/utils.js", WFW_WEB . "js/autocomplete.js", diff --git a/classes/ui/AbstractUIModule.php b/classes/ui/AbstractUIModule.php index 859586e..8c9ea7c 100644 --- a/classes/ui/AbstractUIModule.php +++ b/classes/ui/AbstractUIModule.php @@ -2,17 +2,51 @@ class AbstractUIModule { - //TODO + private $componentPrefix; + + public function __construct($s) + { + $this->componentPrefix = $s; + $this->initComponents($s); + } + + public function initComponents($s) + { + $uiModuleDir = app()->getAbsoluteFile(UI_MODULE); + $compClasses = array( + "MainMenu", + "Toolbar", + "UserMenu", + ); + foreach ($compClasses as $cls) + require_once $uiModuleDir . "classes/" . $s . "UIModule.php"; + } + public function getMainMenu() { - if(!isset($this->mainMenu)) + return $this->getUIComponentObject("MainMenu"); + } + + public function getToolbar() + { + return $this->getUIComponentObject("Toolbar"); + } + + public function getUserMenu() + { + return $this->getUIComponentObject("UserMenu"); + } + + public function getUIComponentObject($component) + { + if(!isset($this->$component)) { - if(!defined(MAIN_MENU_CLASS)) - define("MAIN_MENU_CLASS", "MainMenu"); - if(class_exists($cls = MAIN_MENU_CLASS)) - $this->mainMenu = new $cls; + $className = $this->componentPrefix . $component; + if(!class_exists($className)) + app()->panic("Component class does not exist: $component"); + $this->component = new $className(); } - return $this->mainMenu; + return $this->component; } private $modulePath; diff --git a/ui/squared/classes/SquaredMainMenu.php b/ui/squared/classes/SquaredMainMenu.php new file mode 100644 index 0000000..71cdde2 --- /dev/null +++ b/ui/squared/classes/SquaredMainMenu.php @@ -0,0 +1,78 @@ + + * @copyright (c) 2015 Intellisoft OÜ + * + */ + + class SquaredMainMenu extends HtmlComponent + { + public function toHtml() + { + $p = app()->dbo("menupart"); + $p->orderBy("id"); + $parts = array(); + if($p->find()) + while($p->fetch()) + { + switch ($p->id) + { + case 1: + $icon = "fa-file"; + break; + case 2: + $icon = "fa-print"; + break; + case 3: + $icon = "fa-list-alt"; + break; + case 4: + $icon = "fa-gear"; + break; + default: + $icon = "fa-cube"; + break; + } + $parts[$icon] = clone $p; + } + + $p = app()->dbo("rmodule"); + $p->orderBy("pos"); + $modules = array(); + if($p->find()) + while($p->fetch()) + $modules[] = clone $p; + + $registries = app()->registries(); + + $ret = "" . + ""; + + + return $ret; + } + } \ No newline at end of file diff --git a/ui/squared/classes/SquaredToolbar.php b/ui/squared/classes/SquaredToolbar.php new file mode 100644 index 0000000..65cde16 --- /dev/null +++ b/ui/squared/classes/SquaredToolbar.php @@ -0,0 +1,19 @@ + + * @copyright (c) 2015 Intellisoft OÜ + * + */ + + class SquaredToolbar extends HtmlComponent + { + public function toHtml() + { + $ret = '
+
+ " border="0" height="24"/> + +
' . app()->ui()->getUserMenu()->toHtml() . '
'; + } + } \ No newline at end of file diff --git a/ui/squared/SquaredUIModule.php b/ui/squared/classes/SquaredUIModule.php similarity index 100% rename from ui/squared/SquaredUIModule.php rename to ui/squared/classes/SquaredUIModule.php diff --git a/ui/squared/classes/SquaredUserMenu.php b/ui/squared/classes/SquaredUserMenu.php new file mode 100644 index 0000000..d49a516 --- /dev/null +++ b/ui/squared/classes/SquaredUserMenu.php @@ -0,0 +1,22 @@ + + * @copyright (c) 2015 Intellisoft OÜ + * + */ + + class SquaredUserMenu extends HtmlComponent + { + public function toHtml() + { + return '
+
+ + + + +
+
'; + } + } \ No newline at end of file diff --git a/ui/squared/html/frontpage.php b/ui/squared/html/frontpage.php index c908785..ec2d271 100644 --- a/ui/squared/html/frontpage.php +++ b/ui/squared/html/frontpage.php @@ -19,13 +19,13 @@ var w = $(window).width(); var h = $(window).height(); - var dh = 200; - var dw = 80; + var dh = 40; + var dw = 30; $("#dh").width(w - dw); $(".frontpageMainMenu").height(h - dh); - $(".frontpageMainMenuContents").height(h - dh); + $(".frontpageDashboard").height(h - dh - 40).width(w - 340); }); $(window).resize(); @@ -35,25 +35,15 @@ " />
- " border="0" height="24"/> - sq -
-
-
- - - - -
-
+ " border="0" height="16"/> + +
getUserMenu()->toHtml()?>
-
-
getMainMenu()->toHtml()?>
-
+
getMainMenu()->toHtml()?>
- dashboard contents +
diff --git a/ui/squared/index.php b/ui/squared/index.php index c8f0589..cd49d9e 100644 --- a/ui/squared/index.php +++ b/ui/squared/index.php @@ -1,9 +1,13 @@ getAbsoluteFile(UI_MODULE); - require_once $uiModuleDir . "SquaredUIModule.php"; - require_once $uiModuleDir . "SquaredMainMenu.php"; + require_once $uiModuleDir . "classes/SquaredUIModule.php"; + require_once $uiModuleDir . "classes/SquaredMainMenu.php"; + require_once $uiModuleDir . "classes/SquaredToolbar.php"; + require_once $uiModuleDir . "classes/SquaredUserMenu.php"; - app()->_uiModule = new SquaredUIModule(); \ No newline at end of file + app()->_uiModule = new SquaredUIModule("Squared"); \ No newline at end of file diff --git a/ui/squared/js/mainMenu.js b/ui/squared/js/mainMenu.js index 2706c65..30e925b 100644 --- a/ui/squared/js/mainMenu.js +++ b/ui/squared/js/mainMenu.js @@ -1,11 +1,4 @@ - - function togglePart(partId) - { - $("#partItemsContainer" + partId).toggle(); - $(this).toggleClass("partSelected"); - } - - $(function() - { - $("") - }); \ No newline at end of file +$(function() +{ + $("#menu").metisMenu(); +}); \ No newline at end of file diff --git a/ui/squared/styles.css b/ui/squared/styles.css index ee4137f..302e135 100644 --- a/ui/squared/styles.css +++ b/ui/squared/styles.css @@ -1,28 +1,54 @@ .frontpageTopMenu { - margin: 40px; - padding-bottom: 40px; - border-bottom: 3px solid #000000; - height: 32px; + position: absolute; + padding: 10px; + padding-left: 20px; + height: 20px; + background-image: -webkit-linear-gradient(left, color-stop(#333333 10px), color-stop(#222222 10px)); + background-image: linear-gradient(to right, #333333 10px, #222222 10px); + background-repeat: repeat-x; + filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=1); + + color: #aaa; + box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.05) inset; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + + xborder-top: 1px solid rgba(0, 0, 0, 0.3); + xborder-bottom: 1px solid rgba(0, 0, 0, 0.3); +} + +.frontpageCaption +{ + float: left; + font-weight: bold; + color: white; + display: block; } + .frontpageBody { - margin: 40px; } .frontpageMainMenu { - width: 400px; - border-right: 3px solid #000000; + position: absolute; + top: 40px; + width: 300px; overflow: auto; + background-color: #222222; } -.frontpageMainMenuContents +.frontpageDashboard +{ + position: absolute; + top: 40px; + left: 300px; + margin: 20px; +} + +.frontpageDashboardContents { - width: 360px; - height: 360px; - overflow: auto; } .partContainer @@ -44,6 +70,7 @@ display: table; margin-right: 4px; margin-bottom: 4px; + cursor: pointer; } .menuItemBoxContainer @@ -83,33 +110,91 @@ .userMenuItem { - font-size: 20pt; + font-size: 12pt; margin-left: 10px; + cursor: pointer; } -.squaredUserMenu +.userMenuItem:hover { - float: right; + color: white; } -.frontpageCaption +.squaredUserMenu { - float: left; - font-size: 32px; - font-weight: bold; - color: #505050; - margin-top: -6px; + float: right; + xmargin-right: 20px; } .partItemsContainer { height: 124px; - border: 1px solid red; + xborder: 1px solid red; overflow-y: hidden; display: none; } .partSelected { - background-color: #c9c9c9; + background-color: #505050; +} + +//metismenu + +.sidebar { + display: block; + float: left; + width: 200px; + background: #333; +} +.content { + display: block; + overflow: hidden; + width: auto; +} +.sidebar-nav { + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + background-image: -webkit-linear-gradient(left, color-stop(#333333 10px), color-stop(#222222 10px)); + background-image: linear-gradient(to right, #333333 10px, #222222 10px); + background-repeat: repeat-x; + filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=1); +} +.sidebar-nav ul { + padding: 0; + margin: 0; + list-style: none; +} +.sidebar-nav a, .sidebar-nav a:hover, .sidebar-nav a:focus, .sidebar-nav a:active { + outline: none; +} +.sidebar-nav ul li, .sidebar-nav ul a { + display: block; +} +.sidebar-nav ul a { + padding: 10px 20px; + color: #aaa; + border-top: 1px solid rgba(0, 0, 0, 0.3); + box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.05) inset; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); +} +.sidebar-nav ul a:hover, .sidebar-nav ul a:focus, .sidebar-nav ul a:active { + color: #fff; + text-decoration: none; +} +.sidebar-nav ul ul a { + padding: 10px 30px; + background-color: rgba(255, 255, 255, 0.1); +} +.sidebar-nav ul ul a:hover, .sidebar-nav ul ul a:focus, .sidebar-nav ul ul a:active { + background-color: rgba(255, 255, 255, 0.2); +} +.sidebar-nav-item { + padding-left: 5px; +} +.sidebar-nav-item-icon { + padding-right: 5px; +} +#rtlh3 small { + transform: rotateY(180deg); + display: inline-block; } \ No newline at end of file diff --git a/ui/squared/SquaredMainMenu.php b/ui/squared_v1/SquaredMainMenu.php similarity index 86% rename from ui/squared/SquaredMainMenu.php rename to ui/squared_v1/SquaredMainMenu.php index 418544c..e761b50 100644 --- a/ui/squared/SquaredMainMenu.php +++ b/ui/squared_v1/SquaredMainMenu.php @@ -44,7 +44,7 @@ public function toHtml() } - $ret .= "
id});\">" . t($p->name) . "
id}\" class=\"partItemsContainer\">" . $pc . "
"; + $ret .= "
id}\" onclick=\"JavaScript:togglePart({$p->id});\">" . t($p->name) . "
id}\" class=\"partItemsContainer\">" . $pc . "
"; } $ret .= ""; diff --git a/ui/squared_v1/SquaredUIModule.php b/ui/squared_v1/SquaredUIModule.php new file mode 100644 index 0000000..63bdb0b --- /dev/null +++ b/ui/squared_v1/SquaredUIModule.php @@ -0,0 +1,5 @@ + + * @copyright (c) 2016 Ilja Tihhanovski + * + */ + + $ui = app()->ui(); + $sys = app()->system(); + $cn = $sys->getValue("dynCompanyName"); + + include $ui->getFilePath("html/pagestart.php"); + +?> +" /> +
+
+ " border="0" height="24"/> + sq +
+
+
+ + + + +
+
+
+
+
+
getMainMenu()->toHtml()?>
+
+
+
+ dashboard contents +
+
+
+getFilePath("html/pagefinish.php"); diff --git a/ui/squared_v1/html/pagefinish.php b/ui/squared_v1/html/pagefinish.php new file mode 100644 index 0000000..a50f7a6 --- /dev/null +++ b/ui/squared_v1/html/pagefinish.php @@ -0,0 +1,5 @@ +uiHelper()->includePageSetup(); + +?> \ No newline at end of file diff --git a/ui/squared_v1/html/pagestart.php b/ui/squared_v1/html/pagestart.php new file mode 100644 index 0000000..b706380 --- /dev/null +++ b/ui/squared_v1/html/pagestart.php @@ -0,0 +1,7 @@ + +<?=app()->getPageTitle()?>" type="image/x-con" />" type="image/x-con" />uiHelper()->includeStyles(); + app()->uiHelper()->includeScripts(); + +?> \ No newline at end of file diff --git a/ui/squared_v1/index.php b/ui/squared_v1/index.php new file mode 100644 index 0000000..c8f0589 --- /dev/null +++ b/ui/squared_v1/index.php @@ -0,0 +1,9 @@ +getAbsoluteFile(UI_MODULE); + require_once $uiModuleDir . "SquaredUIModule.php"; + require_once $uiModuleDir . "SquaredMainMenu.php"; + + app()->_uiModule = new SquaredUIModule(); \ No newline at end of file diff --git a/ui/squared_v1/js/mainMenu.js b/ui/squared_v1/js/mainMenu.js new file mode 100644 index 0000000..9abddf9 --- /dev/null +++ b/ui/squared_v1/js/mainMenu.js @@ -0,0 +1,11 @@ + + function togglePart(partId) + { + $("#partItemsContainer" + partId).toggle(); + $(".partHeader" + partId).toggleClass("partSelected"); + } + + $(function() + { + $("") + }); \ No newline at end of file diff --git a/ui/squared_v1/styles.css b/ui/squared_v1/styles.css new file mode 100644 index 0000000..986e5ca --- /dev/null +++ b/ui/squared_v1/styles.css @@ -0,0 +1,122 @@ +.frontpageTopMenu +{ + margin: 40px; + padding-bottom: 40px; + border-bottom: 3px solid #000000; + height: 32px; +} + +.frontpageBody +{ + margin: 40px; +} + +.frontpageMainMenu +{ + width: 400px; + border-right: 3px solid #000000; + overflow: auto; +} + +.frontpageMainMenuContents +{ + width: 360px; + height: 360px; + overflow: auto; +} + +.partContainer +{ + clear: both; + margin-bottom: 4px; + height: 120px; +} + +.partHeader +{ + width: 124px; + height: 124px; + float: left; + background-color: black; + color: white; + text-transform: uppercase; + text-align: center; + display: table; + margin-right: 4px; + margin-bottom: 4px; + cursor: pointer; +} + +.menuItemBoxContainer +{ + width: 60px; + height: 60px; + max-width: 60px; + overflow-x: hidden; + float: left; + background-color: black; + color: white; + margin-right: 4px; + margin-bottom: 4px; +} + +.menuItemBox +{ + width: 60px; + height: 60px; + max-width: 60px; + overflow-x: hidden; + float: left; + background-color: black; + color: white; + text-transform: uppercase; + text-align: center; + display: table; +} + +.menuItemName +{ + display: table-cell; + vertical-align: middle; + font-size: 6pt; + +} + +.userMenuItem +{ + font-size: 20pt; + margin-left: 10px; + cursor: pointer; +} + +.userMenuItem:hover +{ + color: #7b33fe; +} + +.squaredUserMenu +{ + float: right; +} + +.frontpageCaption +{ + float: left; + font-size: 32px; + font-weight: bold; + color: #7b33fe; + margin-top: -6px; +} + +.partItemsContainer +{ + height: 124px; + xborder: 1px solid red; + overflow-y: hidden; + display: none; +} + +.partSelected +{ + background-color: #505050; +} \ No newline at end of file