Slim, Twig and CoreUI

- Use Slim framework to handle routes
- Use Twig templating system for all display
- Use a bootstrap based UI framework for all UI parts
- Implement a form builder based on twig templates
- Guess objects relations from configuration, use that to build tabs and
subforms and sub lists
- Add Twig extensions (Reflection for static calls, Locales, ...)
- Use Search to display sub lists in objects rather than specific code
- Add tracy debug bar with slim support (as a try)
- Add specific countForTab; deprecate old way (needs to be checked
anyways)
- Multiple progress bar on search results

... And more!

.circleci/config.yml

@@ -53,7 +53,7 @@ shared: &shared
     - run:
         name: Coding standards
         command: |
-          if [[ $(php --version|grep "7\.3") ]]; then vendor/bin/phpcs -d memory_limit=512M -p -n --extensions=php --standard=PSR2 ./src && vendor/bin/phpcs -d memory_limit=512M -p --extensions=php --standard=vendor/glpi-project/coding-standard/GlpiStandard/ --ignore=/.git,/config,/files,/lib,/node_modules,/plugins,/src,/tests/config,/vendor ./; else echo "No CS for this version"; fi
+          if [[ $(php --version|grep "7\.3") ]]; then vendor/bin/phpcs -d memory_limit=512M -p -n --extensions=php --standard=PSR2 ./src ./public/index.php && vendor/bin/phpcs -d memory_limit=512M -p --extensions=php --standard=vendor/glpi-project/coding-standard/GlpiStandard/ --ignore=/.git,/config,/files,/lib,/node_modules,/plugins,/src,/tests/config,/vendor ./; else echo "No CS for this version"; fi
           if [[ $(php --version|grep "7\.3") ]]; then node_modules/.bin/eslint ./js && node_modules/.bin/eslint --env=node --parser-options=ecmaVersion:6 --rule 'indent: ["error", 4]' ./webpack.config.js && echo "ESLint found no errors"; else echo "No CS for this version"; fi
           if [[ $(php --version|grep "7\.3") ]]; then node_modules/.bin/stylelint "css/**/*.{,s,sa}css" --ignore-pattern="css/tiny_mce/**" && echo "ESLint found no errors"; else echo "No CS for this version"; fi
     - run:

composer.json

@@ -39,20 +39,26 @@
         "symfony/dependency-injection": "^3.4",
         "symfony/yaml": "^3.4",
         "symfony/config": "^3.4",
-        "symfony/event-dispatcher": "^3.4"
+        "symfony/event-dispatcher": "^3.4",
+        "slim/slim": "^3.9",
+        "slim/twig-view": "^2.3",
+        "doctrine/annotations": "^1.4",
+        "twig/extensions": "^1.5",
+        "kanellov/slim-twig-flash": "^0.2.0",
+        "runcmf/runtracy": "^0.2.10"
     },
     "require-dev": {
         "guzzlehttp/guzzle": "~6",
         "glpi-project/coding-standard": "^0.7.1",
         "consolidation/robo": "^1.0",
-        "natxet/CssMin": "^3.0",
+        "natxet/cssmin": "^3.0",
         "patchwork/jsqueeze": "^2.0",
         "atoum/atoum": "^3.3",
         "atoum/telemetry-extension": "^1.0",
         "sensiolabs/security-checker": "^4.1",
-        "fzaninotto/Faker": "^1.7",
+        "fzaninotto/faker": "^1.7",
         "jakub-onderka/php-parallel-lint": "^1.0",
-        "mikey179/vfsStream": "^1.6"
+        "mikey179/vfsstream": "^1.6"
     },
     "suggest": {
         "ext-ldap": "Used ot provide LDAP authentication and synchronization",

css/glpi.scss

+/**
+ * ---------------------------------------------------------------------
+ * GLPI - Gestionnaire Libre de Parc Informatique
+ * Copyright (C) 2015-2018 Teclib' and contributors.
+ *
+ * http://glpi-project.org
+ *
+ * based on GLPI - Gestionnaire Libre de Parc Informatique
+ * Copyright (C) 2003-2014 by the INDEPNET Development Team.
+ *
+ * ---------------------------------------------------------------------
+ *
+ * LICENSE
+ *
+ * This file is part of GLPI.
+ *
+ * GLPI is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * GLPI is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with GLPI. If not, see <http://www.gnu.org/licenses/>.
+ * ---------------------------------------------------------------------
+ */
+
+@import "glpi/layout";
+
+@import "glpi/component/debug";
+
+@import "glpi/page/login";
+
+@import "legacy";
+
+
+
+/* TODO Clean following CSS */
+
+.flash {
+   z-index: 1051!important;
+}
+
+/** Language selector */
+
+#language_link form {
+   margin-top: 6px;
+}
+
+/** Dropdowns */
+
+.fa {
+   &.wentity {
+      color: #3A5693;
+   }
+   &.woentity {
+      color: #ccc;
+   }
+}
+
+/** /Dropdowns */
+
+/** Debug stuff */
+
+
+/** /debug stuff */
+
+ul.pagination {
+   margin: 0;
+}
+
+.flash {
+   min-height: 2em;
+   min-width: 15em;
+   position: fixed;
+   right: .2em;
+   bottom: .2em;
+   z-index: 10;
+}
+
+/** Alpha msg */
+
+.alpha {
+   text-align: center;
+   border-radius: 0 !important;
+   padding-top: 0.1em !important;
+   padding-bottom: 0.1em !important;
+   h4 {
+      margin: 0 !important;
+      span {
+         margin: 0 1em;
+      }
+   }
+}
+
+/** /Alpha msg */
+
+
+
+/** "slide panel" component */
+
+.slidepanel {
+   z-index: 1050;
+   position: absolute;
+   width: 30em;
+   max-width: 40%;
+   background: white;
+   top: 0;
+   min-height: 100vh;
+   height: calc(100% - 28px);
+   /* Without footer */
+   border: none;
+   overflow: auto;
+   a.fa {
+      font-size: 1.5em;
+      color: #ccc;
+      &:link {
+         font-size: 1.5em;
+         color: #ccc;
+      }
+   }
+}
+
+.fa {
+   &.bookmark_record, &.reset-search {
+      color: #ccc !important;
+      &:link {
+         color: #ccc !important;
+      }
+   }
+   &.bookmark_default {
+      font-size: 1.5em;
+      color: #f3b51f !important;
+      &:link {
+         font-size: 1.5em;
+         color: #f3b51f !important;
+      }
+   }
+   &.reset-search:hover, &.bookmark_record.save:hover {
+      color: #999 !important;
+   }
+}
+
+.slidepanel a .count .fa {
+   color: white;
+}
+
+.drag {
+   display: inline-block;
+   height: 18px;
+   padding-right: 1em;
+   cursor: move;
+}
+
+.slidepanel {
+   .header {
+      border-bottom: 1px solid #ccc;
+      min-height: 2.4em;
+      > h3 {
+         margin: 0;
+         padding-top: .3em;
+         text-align: center;
+      }
+      .icon {
+         margin-top: .5em;
+         margin-right: .5em;
+      }
+   }
+   .contents {
+      clear: both;
+   }
+}
+
+.layout_lefttab .slidepanel .new_form_tabs .ui-tabs-nav {
+   width: auto;
+}
+
+.slidepanel {
+   .ui-tabs {
+      width: auto;
+   }
+   &.onleft {
+      left: 0;
+      border-right: 1px solid #ccc;
+      .close {
+         float: right;
+      }
+      .icon {
+         float: left;
+      }
+   }
+   &.onright {
+      right: 0;
+      border-left: 1px solid #ccc;
+      .close {
+         float: left;
+      }
+      .icon {
+         float: right;
+      }
+   }
+   .tab_cadre_fixehov {
+      box-shadow: none;
+   }
+   .default {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+   }
+   td * {
+      vertical-align: middle;
+   }
+   .toggle {
+      font-size: 1.5em;
+      position: absolute;
+      right: .2em;
+   }
+}
+
+/** end "slide panel" component */
+
+.progress-group {
+   clear: right;
+}

css/glpi/component/debug.scss

+/**
+ * ---------------------------------------------------------------------
+ * GLPI - Gestionnaire Libre de Parc Informatique
+ * Copyright (C) 2015-2018 Teclib' and contributors.
+ *
+ * http://glpi-project.org
+ *
+ * based on GLPI - Gestionnaire Libre de Parc Informatique
+ * Copyright (C) 2003-2014 by the INDEPNET Development Team.
+ *
+ * ---------------------------------------------------------------------
+ *
+ * LICENSE
+ *
+ * This file is part of GLPI.
+ *
+ * GLPI is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * GLPI is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with GLPI. If not, see <http://www.gnu.org/licenses/>.
+ * ---------------------------------------------------------------------
+ */
+
+.debug {
+   .btn-hide-debug {
+      top: .1em;
+      position: absolute;
+      right: .1em;
+   }
+   .btn-show-debug {
+      bottom: .1em;
+      position: fixed;
+      right: .1em;
+      z-index: 99; /* behind debug panel */
+   }
+
+   .debug-tabs {
+      background: #fff;
+      bottom: 0;
+      color: #000;
+      left: 0;
+      margin: 0;
+      max-height: 300px;
+      overflow: auto;
+      position: fixed;
+      z-index: 1000;
+      width: 100%;
+
+      table {
+         width: 100%;
+      }
+   }
+}

css/glpi/layout.scss

+/**
+ * ---------------------------------------------------------------------
+ * GLPI - Gestionnaire Libre de Parc Informatique
+ * Copyright (C) 2015-2018 Teclib' and contributors.
+ *
+ * http://glpi-project.org
+ *
+ * based on GLPI - Gestionnaire Libre de Parc Informatique
+ * Copyright (C) 2003-2014 by the INDEPNET Development Team.
+ *
+ * ---------------------------------------------------------------------
+ *
+ * LICENSE
+ *
+ * This file is part of GLPI.
+ *
+ * GLPI is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * GLPI is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with GLPI. If not, see <http://www.gnu.org/licenses/>.
+ * ---------------------------------------------------------------------
+ */
+
+body {
+   font-size: 0.875rem; /* 0.875rem = 14px */
+
+   footer.app-footer {
+      .copyright {
+         margin: 0 auto 0 0;
+      }
+   }
+
+   .app-header {
+      background: rgb(54, 127, 169);
+      color: white;
+   }
+}

css/glpi/page/login.scss

+/**
+ * ---------------------------------------------------------------------
+ * GLPI - Gestionnaire Libre de Parc Informatique
+ * Copyright (C) 2015-2018 Teclib' and contributors.
+ *
+ * http://glpi-project.org
+ *
+ * based on GLPI - Gestionnaire Libre de Parc Informatique
+ * Copyright (C) 2003-2014 by the INDEPNET Development Team.
+ *
+ * ---------------------------------------------------------------------
+ *
+ * LICENSE
+ *
+ * This file is part of GLPI.
+ *
+ * GLPI is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * GLPI is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with GLPI. If not, see <http://www.gnu.org/licenses/>.
+ * ---------------------------------------------------------------------
+ */
+
+body.page-login {
+
+   #firstboxlogin {
+      width: 100%;
+      min-height: 100%;
+      min-height: 100vh;
+      /* double min-height, some old browser don't have vh units support*/
+   }
+
+   #logo_login {
+      padding: 80px 0 0;
+      margin: 0 auto 0;
+      height: 76px;
+      box-sizing: unset;
+   }
+
+   #display-login, #text-login {
+      width: 100%;
+      margin: 0 auto;
+      padding: 20px 20%;
+      font-size: 13px;
+      text-align: center;
+      overflow-x: hidden;
+      overflow-y: auto;
+      box-sizing: border-box;
+   }
+
+   #boxlogin {
+      padding-top: 10px;
+      bottom: 0;
+      width: 20em;
+      margin: 0 auto;
+      .login_input {
+         position: relative;
+         margin: 15px auto 5px;
+         width: 240px;
+      }
+      label {
+         color: #FFF;
+         font-size: 1.2em;
+      }
+      input {
+         &:-webkit-autofill {
+            box-shadow: 0 0 0px 1000px white inset;
+            &:focus {
+               box-shadow: 0 0 0px 1000px white inset;
+            }
+         }
+         &.submit {
+            margin-top: 20px;
+            width: 100%;
+            height: 30px;
+            font-size: 1.3em;
+         }
+      }
+      #forget {
+         margin-top: 50px;
+         color: #FFF;
+         width: 100%;
+         display: block;
+         text-align: center;
+      }
+   }
+
+   #footer {
+      font-size: .85em;
+      position: absolute;
+      right: 10px;
+      background-color: transparent;
+      border: none;
+      margin: 0;
+      padding: 0;
+      bottom: 15px;
+      a {
+         color: #FFF;
+      }
+   }
+
+   /** Backport Auror */
+   #firstboxlogin {
+      background-color: #1B2F62;
+   }
+
+   #logo_login {
+      background: url(/pics/login_logo_glpi.png) center no-repeat, #3A5693;
+   }
+
+   #display-login {
+      color: #FFF;
+   }
+
+   #text-login {
+      background-color: #3A5693;
+      color: #FFF;
+   }
+
+   label {
+      font-weight: normal;
+   }
+}

css/legacy.scss

+/**
+ * ---------------------------------------------------------------------
+ * GLPI - Gestionnaire Libre de Parc Informatique
+ * Copyright (C) 2015-2018 Teclib' and contributors.
+ *
+ * http://glpi-project.org
+ *
+ * based on GLPI - Gestionnaire Libre de Parc Informatique
+ * Copyright (C) 2003-2014 by the INDEPNET Development Team.
+ *
+ * ---------------------------------------------------------------------
+ *
+ * LICENSE
+ *
+ * This file is part of GLPI.
+ *
+ * GLPI is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * GLPI is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with GLPI. If not, see <http://www.gnu.org/licenses/>.
+ * ---------------------------------------------------------------------
+*/
+
+/*
+ * This file aims to wrap all legacy styles into a .legacy class.
+ * This class is applied to <html> element for all legacy pages,
+ * and can be applied to a container to render its using legacy styles.
+ */
+
+.legacy {
+   @import "styles";
+
+   @import "chartists-glpi.css";
+   @import "jquery-glpi.css";
+   @import "jstree-glpi.css";
+   @import "tab-scroller-menu.css";
+}
+
+@media print {
+   .legacy {
+      @import "print.css";
+   }
+}

css/win_png.htc

-<public:component>
-<public:attach event="onpropertychange" onevent="propertyChanged()" />
-<script>
-
-var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
-var realSrc;
-var blankSrc = "../pics/nothing.gif";
-
-if (supported) fixImage();
-
-function propertyChanged() {
-	if (!supported) return;
-
-	var pName = event.propertyName;
-	if (pName != "src") return;
-	// if not set to blank
-	if ( ! new RegExp(blankSrc).test(src))
-		fixImage();
-};
-
-function fixImage() {
-	// get src
-	var src = element.src;
-
-	// check for real change
-	if (src == realSrc) {
-		element.src = blankSrc;
-		return;
-	}
-
-	if ( ! new RegExp(blankSrc).test(src)) {
-		// backup old src
-		realSrc = src;
-
-		// test for png
-		if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
-			// set blank image
-			element.src = blankSrc;
-			// set filter
-			element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
-				src + "',sizingMethod='image')";
-		}
-	}
-}
-
-</script>
-</public:component>

front/find_num.php

@@ -46,7 +46,7 @@ echo "<html lang=\"{$CFG_GLPI["languages"][$_SESSION['glpilanguage']][3]}\">";
     <title>GLPI</title>
 
 <?php
-echo Html::scss('main_styles');
+echo Html::scss('glpi-legacy');
 echo Html::script($CFG_GLPI["root_doc"].'/script.js');
 ?>
 

front/helpdesk.php

@@ -34,7 +34,7 @@
 include ('../inc/includes.php');
 
 echo "<!DOCTYPE html>";
-echo "<html lang=\"{$CFG_GLPI["languages"][$_SESSION['glpilanguage']][3]}\">";
+echo "<html lang=\"{$CFG_GLPI["languages"][$_SESSION['glpilanguage']][3]}\" class=\"legacy\">";
 ?>
 
 <head>

front/search.php

@@ -57,7 +57,8 @@ if (isset($_GET["globalsearch"])) {
          //          $_SESSION["glpisearchcount"][$itemtype]  = $count+1;
          //          $_SESSION["glpisearchcount2"][$itemtype] = 0;
 
-         Search::showList($itemtype, $params);
+         $search = new \Search($itemtype, $params);
+         $search->showList($itemtype, $params);
          echo "<hr>";
       }
    }

inc/api.class.php

@@ -1573,7 +1573,7 @@ abstract class API extends CommonGLPI {
 
       // call Core Search method
       $search = new \Search(new $itemtype(), $params);
-      $rawdata = $search->getData($itemtype, $params, $params['forcedisplay']);
+      $rawdata = $search->getData();
 
       // probably a sql error
       if (!isset($rawdata['data']) || count($rawdata['data']) === 0) {
@@ -2254,6 +2254,7 @@ abstract class API extends CommonGLPI {
     * @return void
     */
    public function inlineDocumentation($file) {
+        //this should be served from a slim route
       $this->header(true, __("API Documentation"));
       echo Html::css("public/lib/prismjs/themes/prism-coy.css");
       echo Html::script("public/lib/prismjs/components/prism-core.js");

inc/change_item.class.php

@@ -211,12 +211,13 @@ class Change_Item extends CommonDBRelation{
 
 
    function getTabNameForItem(CommonGLPI $item, $withtemplate = 0) {
+      global $IS_TWIG;
 
       if (!$withtemplate) {
          $nb = 0;
          switch ($item->getType()) {
             case 'Change' :
-               if ($_SESSION['glpishow_count_on_tabs']) {
+               if ($_SESSION['glpishow_count_on_tabs'] && !$IS_TWIG) {
                   $nb = self::countForMainItem($item);
                }
                return self::createTabEntry(_n('Item', 'Items', Session::getPluralNumber()), $nb);
@@ -224,14 +225,14 @@ class Change_Item extends CommonDBRelation{
             case 'User' :
             case 'Group' :