Merged in feature/PMCORE-3138 (pull request #8317)

PMCORE-3138

Approved-by: Julio Cesar Laura Avendaño

resources/assets/js/components/search/AdvancedFilter.vue

@@ -692,7 +692,7 @@ export default {
     },
 };
 </script>
-<style scoped>
+<style lang="scss">
 .bv-example-row .row + .row {
     margin-top: 1rem;
 }

resources/assets/js/components/search/CasesFilter.vue

@@ -36,7 +36,7 @@
             </template>
         </SearchPopover>
 
-        <div class="p-1 v-flex">
+        <div class="p-1 filter-field">
             <h5 class="v-search-title">{{ title }}</h5>
             <div class="pm-in-text-icon">
                 <i :class="icon"></i>
@@ -530,7 +530,7 @@ export default {
     },
 };
 </script>
-<style scoped>
+<style lang="scss">
 .bv-example-row .row + .row {
     margin-top: 1rem;
 }
@@ -543,8 +543,8 @@ export default {
     background-color: #0099dd;
 }
 
-.v-flex {
+.filter-field {
-    display: flex;
+  display: flex;
 }
 
 .v-search-title {

resources/assets/js/components/search/CustomFilter.vue

@@ -29,7 +29,7 @@
             </template>
         </SearchPopover>
 
-        <div class="p-1 v-flex">
+        <div class="p-1 filter-field">
             <h5 class="v-search-title">{{ title }}</h5>
             <div class="pm-in-text-icon">
                 <i :class="icon"></i>
@@ -343,7 +343,7 @@ export default {
     },
 };
 </script>
-<style scoped>
+<style lang="scss">
 .bv-example-row .row + .row {
     margin-top: 1rem;
 }
@@ -356,8 +356,8 @@ export default {
     background-color: #0099dd;
 }
 
-.v-flex {
+.filter-field {
-    display: flex;
+  display: flex;
 }
 
 .v-search-title {

resources/assets/js/components/search/MyCasesFilter.vue

@@ -37,7 +37,7 @@
             </template>
         </SearchPopover>
 
-    <div class="p-1 v-flex">
+    <div class="p-1 filter-field">
         <h5 class="v-search-title">{{ title }}</h5>
         <div class="pm-mc-text-icon">
             <i :class="icon"></i>
@@ -453,7 +453,7 @@ export default {
     }
 };
 </script>
-<style scoped>
+<style lang="scss">
 .bv-example-row .row + .row {
     margin-top: 1rem;
 }
@@ -465,7 +465,7 @@ export default {
   background-color: #0099dd;
 }
 
-.v-flex {
+.filter-field {
   display: flex;
 }
 

workflow/engine/methods/cases/viena_init.php

@@ -10,8 +10,6 @@ use ProcessMaker\Model\User;
 $conf = new Configurations();
 
 $oHeadPublisher = headPublisher::getSingleton();
-$oHeadPublisher->addExtJsScript("cases/main", false); //Adding a javascript file .js
-$oHeadPublisher->addContent("cases/main"); //Adding a html file  .html.
 
 $keyMem = "USER_PREFERENCES" . $_SESSION["USER_LOGGED"];
 $memcache = PMmemcached::getSingleton(config("system.workspace"));
@@ -163,4 +161,4 @@ ScriptVariables::add('userId', User::getId($_SESSION['USER_LOGGED']));
 ScriptVariables::add('userConfig', array(
   "usr_uid" => $_SESSION['USER_LOGGED']
 ));
-echo View::make('Views::home.home', compact("userCanAccess"))->render();
+G::RenderPage("publish", "viena");

workflow/engine/skinEngine/neoclassic/config.xml

@@ -48,5 +48,8 @@
             <cssFile file="sprite.css" enabledBrowsers="ALL" disabledBrowsers="ie7"></cssFile>
             <cssFile file="rtl.css" enabledBrowsers="ALL" disabledBrowsers=""></cssFile>
         </extjs>
+        <viena>
+            <cssFile file="app.css" enabledBrowsers="ALL" disabledBrowsers=""></cssFile>
+        </viena>
     </cssFiles>
 </skinConfiguration>

workflow/engine/skinEngine/neoclassic/css/app.css

@@ -0,0 +1,595 @@
+.v-sidebar-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  z-index: 999;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  -webkit-transition: 0.3s max-width;
+  transition: 0.3s max-width;
+}
+
+.v-sidebar-menu * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.v-sidebar-menu > .vsm--list {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.v-sidebar-menu .vsm--dropdown > .vsm--list {
+  padding: 5px;
+  background-color: #0099dd;
+}
+
+.v-sidebar-menu .vsm--item {
+  position: relative;
+  display: block;
+}
+
+.vsm_collapsed .vsm--item {
+  margin-left: 0px;
+}
+
+.v-sidebar-menu .vsm--link {
+  cursor: pointer;
+  position: relative;
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 8px 8px 8px 0px;
+  line-height: 30px;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 20;
+  -webkit-transition: 0.3s all;
+  transition: 0.3s all;
+}
+
+.v-sidebar-menu .vsm--link_exact-active,
+.v-sidebar-menu .vsm--link_active {
+  font-weight: 600;
+}
+
+.v-sidebar-menu .vsm--link_disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.v-sidebar-menu .vsm--link_level-1 .vsm--icon {
+  line-height: 30px;
+  width: 30px;
+  text-align: center;
+  border-radius: 3px;
+  margin-right: 0px;
+  margin-left: 10px;
+}
+
+.v-sidebar-menu .vsm--link:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+.v-sidebar-menu .vsm--link_mobile-item {
+  background-color: #0099dd;
+}
+
+.v-sidebar-menu .vsm--link_mobile-item.vsm--link_hover,
+.v-sidebar-menu .vsm--link_mobile-item:hover {
+  background-color: #5aa4c4 !important;
+}
+
+.v-sidebar-menu .vsm--title {
+  display: block;
+  white-space: nowrap;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v-sidebar-menu .vsm--icon {
+  float: left;
+  line-height: 30px;
+  margin-right: 10px;
+}
+
+.vsm--link_level-2 > .vsm--icon {
+  margin-top: 0px;
+  padding-left: 20px;
+}
+
+.v-sidebar-menu .vsm--arrow {
+  width: 30px;
+  text-align: center;
+  font-style: normal;
+  font-weight: 900;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  -webkit-transition: 0.3s -webkit-transform;
+  transition: 0.3s -webkit-transform;
+  transition: 0.3s transform;
+  transition: 0.3s transform, 0.3s -webkit-transform;
+}
+
+.v-sidebar-menu .vsm--arrow:after {
+  content: "\F0A9";
+  font-family: "Font Awesome 5 Free";
+}
+
+.v-sidebar-menu .vsm--arrow_open {
+  -webkit-transform: translateY(-50%) rotate(90deg);
+  transform: translateY(-50%) rotate(90deg);
+}
+
+.v-sidebar-menu .vsm--arrow_slot:after {
+  display: none;
+}
+
+.v-sidebar-menu .vsm--header {
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px;
+  white-space: nowrap;
+  text-transform: uppercase;
+}
+
+.v-sidebar-menu .vsm--badge {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  border-radius: 11px;
+}
+
+.v-sidebar-menu .vsm--badge_default {
+  padding: 0px 6px;
+  font-size: 12px;
+  border-radius: 3px;
+  height: 20px;
+  line-height: 20px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.v-sidebar-menu .vsm--toggle-btn {
+  display: block;
+  text-align: center;
+  font-style: normal;
+  font-weight: 900;
+  height: 50px;
+  cursor: pointer;
+  border: none;
+  width: 100%;
+}
+
+.v-sidebar-menu .vsm--toggle-btn:after {
+  content: "\F337";
+  font-family: "Font Awesome 5 Free";
+}
+
+.v-sidebar-menu .vsm--toggle-btn_slot:after {
+  display: none;
+}
+
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-1.vsm--link_hover,
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-1:hover {
+  background-color: transparent !important;
+}
+
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-1 .vsm--icon,
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-2 > .vsm--icon {
+  margin-right: 0px;
+  padding-left: 0px;
+}
+
+.v-sidebar-menu.vsm_rtl {
+  right: 0;
+  left: inherit;
+  text-align: right;
+}
+
+.v-sidebar-menu.vsm_rtl > .vsm--list {
+  direction: rtl;
+}
+
+.v-sidebar-menu.vsm_rtl.vsm_collapsed
+  > .vsm--list
+  .vsm--link_level-1
+  .vsm--icon {
+  margin-left: 0px;
+}
+
+.v-sidebar-menu.vsm_rtl .vsm--icon {
+  float: right;
+  margin-left: 10px;
+  margin-right: 0px;
+}
+
+.v-sidebar-menu.vsm_rtl .vsm--arrow {
+  left: 10px;
+  right: inherit;
+}
+
+.v-sidebar-menu.vsm_rtl .vsm--badge {
+  left: 10px;
+  right: inherit;
+}
+
+.v-sidebar-menu .expand-enter-active,
+.v-sidebar-menu .expand-leave-active {
+  -webkit-transition: height 0.35s ease;
+  transition: height 0.35s ease;
+  overflow: hidden;
+}
+
+.v-sidebar-menu .expand-enter,
+.v-sidebar-menu .expand-leave-to {
+  height: 0 !important;
+}
+
+.v-sidebar-menu .slide-animation-enter-active {
+  -webkit-animation: slide-animation 0.2s;
+  animation: slide-animation 0.2s;
+}
+
+.v-sidebar-menu .slide-animation-leave-active {
+  animation: slide-animation 0.2s reverse;
+}
+
+@-webkit-keyframes slide-animation {
+  0% {
+    width: 0%;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
+@keyframes slide-animation {
+  0% {
+    width: 0%;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
+.v-sidebar-menu .vsm--mobile-item > .vsm--item {
+  padding-top: 0 !important;
+  margin-top: 0 !important;
+}
+
+.v-sidebar-menu {
+  background-color: #0099dd;
+}
+
+.v-sidebar-menu .vsm--scroll-wrapper {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.v-sidebar-menu .vsm--link {
+  color: #fff;
+}
+
+.v-sidebar-menu .vsm--link_exact-active,
+.v-sidebar-menu .vsm--link_active {
+  color: #fff;
+  background: #5aa4c4;
+}
+
+.v-sidebar-menu .vsm--link_level-1 .vsm--link_exact-active,
+.v-sidebar-menu .vsm--link_level-1 .vsm--link_active {
+  -webkit-box-shadow: 3px 0px 0px 0px #3397e1 inset;
+  box-shadow: 3px 0px 0px 0px #3397e1 inset;
+}
+
+.v-sidebar-menu .vsm--link_level-1.vsm--link_exact-active .vsm--icon,
+.v-sidebar-menu .vsm--link_level-1.vsm--link_active .vsm--icon {
+  color: #fff;
+}
+
+a.router-link-exact-active.router-link-active.vsm--link.vsm--link_level-2.vsm--link_active.vsm--link_exact-active {
+  background: #5aa4c4;
+}
+
+.v-sidebar-menu .vsm--link_hover,
+.v-sidebar-menu .vsm--link:hover {
+  color: #fff;
+  background-color: #5aa4c4;
+}
+
+.v-sidebar-menu .vsm--dropdown .vsm--link:hover {
+  color: #fff;
+  background-color: #5aa4c4;
+}
+
+.v-sidebar-menu .vsm--link_mobile-item {
+  color: #fff;
+}
+
+.v-sidebar-menu .vsm--link_mobile-item.vsm--link_hover,
+.v-sidebar-menu .vsm--link_mobile-item:hover {
+  color: #fff;
+}
+
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-1.vsm--link_hover .vsm--icon,
+.v-sidebar-menu.vsm_collapsed .vsm--link_level-1:hover .vsm--icon {
+  color: #fff;
+  background-color: #0099dd;
+}
+
+.v-sidebar-menu .vsm--dropdown .vsm--link {
+  color: #fff;
+  background-color: #0099dd;
+}
+
+.vsm--link_level-2:hover .vsm--title,
+.vsm--link_level-2:hover .vsm--icon {
+  color: #fff;
+}
+
+.v-sidebar-menu .vsm--mobile-bg {
+  background-color: #5aa4c4;
+}
+
+.v-sidebar-menu.vsm_expanded .vsm--item_open .vsm--link_level-1 {
+  color: #fff;
+  background-color: #5aa4c4;
+}
+
+.v-sidebar-menu.vsm_expanded .vsm--item_open .vsm--link_level-1 .vsm--icon {
+  color: #fff;
+  background-color: #5aa4c4;
+}
+
+.v-sidebar-menu.vsm_rtl .vsm--link_level-1.vsm--link_active,
+.v-sidebar-menu.vsm_rtl .vsm--link_level-1.vsm--link_exact-active {
+  -webkit-box-shadow: -3px 0px 0px 0px #3397e1 inset;
+  box-shadow: -3px 0px 0px 0px #9ac5c7 inset;
+}
+
+.v-sidebar-menu .vsm--header {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.v-sidebar-menu .vsm--badge_default {
+  color: #fff;
+  background-color: #1e1e21;
+}
+
+.v-sidebar-menu .vsm--toggle-btn {
+  color: #222222;
+  background-color: #fff;
+}
+
+.vsm--item > .vsm--item_open {
+  color: #fff;
+  background-color: #9ac5c7;
+}
+
+.vsm--item > .vsm--item_open .vsm--icon {
+  color: #9ac5c7;
+}
+
+.v-sidebar-menu
+  .vsm--dropdown
+  > .vsm--list
+  .vsm--link.vsm--link_level-2.vsm--item_open {
+  color: #9ac5c7;
+  background-color: #5aa4c4;
+}
+
+.bs-frame-ltr {
+  height: calc(100vh - 0.1em);
+  overflow-y: hidden;
+  float: right;
+}
+
+.bs-frame-rtl {
+  height: calc(100vh - 0.1em);
+  overflow-y: hidden;
+  float: left;
+}
+
+.v-sidebar-menu .vsm--arrow-rtl:after {
+  content: "\F0A9" !important;
+  font-family: "Font Awesome 5 Free";
+}
+
+.v-sidebar-menu .vsm--arrow.vsm--arrow_open-rtl {
+  -webkit-transform: translateY(-50%) rotate(90deg);
+  transform: translateY(-50%) rotate(270deg) !important;
+}
+
+.vsm--mobile-item {
+  max-width: 210px !important;
+}
+
+/* Styles */
+a {
+  color: #0099dd;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+a:hover {
+  color: #5aa4c4;
+  /* text-decoration: none; */
+  background-color: transparent;
+}
+
+#home {
+  padding-left: 260px;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+#home.collapsed {
+  padding-left: 50px;
+}
+
+#home.onmobile {
+  padding-left: 50px;
+}
+
+.container {
+  max-width: 1500px;
+}
+
+.bg-primary-pm {
+  background-color: #0099dd;
+}
+/** table section **/
+
+.table thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #dee2e6;
+}
+
+.card-body {
+  background-color: #5aa4c4;
+  color: #fff;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 1px;
+  padding: 1.25rem;
+}
+.text-muted {
+  color: #fff !important;
+}
+.filter-field {
+  display: flex;
+}
+
+.page-item.active .page-link {
+  z-index: 3;
+  color: #fff;
+  background-color: #4b246d;
+  border-color: #4b246d;
+}
+.page-link {
+  position: relative;
+  display: block;
+  padding: 0.5rem 0.75rem;
+  margin-left: -1px;
+  line-height: 1.25;
+  color: #4b246d;
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+}
+
+.comment > button {
+  color: #fff;
+  background-color: #0099dd;
+  border-color: #0099dd;
+}
+
+.comment > button:hover {
+  color: #fff;
+  background-color: #5aa4c4;
+  border-color: #5aa4c4;
+}
+
+.vp-btn-secondary {
+  color: #2f3133;
+  background-color: #b5b6b6;
+}
+
+.vp-btn-secondary:hover {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+
+.vp-btn-primary-inactive {
+  color: #6c757d;
+  background-color: #0099dd;
+  border-color: #0099dd;
+}
+
+.vp-btn-primary-inactive:hover {
+  color: #6c757d;
+  background-color: #5aa4c4;
+  border-color: #5aa4c4;
+}
+
+.v-pm-drill-down-number.btn-primary {
+  color: #fff;
+  background-color: #0099dd;
+  border-color: #0099dd;
+}
+.v-pm-drill-down-number.btn-primary.focus,
+.v-pm-drill-down-number.btn-primary:focus,
+.v-pm-drill-down-number.btn-primary:hover {
+  color: #fff;
+  background-color: #5aa4c4;
+  border-color: #5aa4c4;
+}
+
+.v-pm-drill-down-number.btn-primary.focus,
+.v-pm-drill-down-number.btn-primary:focus {
+  box-shadow: 0 0 0 0.2rem rgba(108, 72, 180, 0.5);
+}
+
+.v-pm-drill-down-number.btn-primary.disabled,
+.v-pm-drill-down-number.btn-primary:disabled {
+  color: #fff;
+  background-color: #0099dd;
+  border-color: #0099dd;
+}
+
+.v-pm-drill-down-number.btn-primary:not(:disabled):not(.disabled).active,
+.v-pm-drill-down-number.btn-primary:not(:disabled):not(.disabled):active,
+.show > .v-pm-drill-down-number.btn-primary.dropdown-toggle {
+  color: #fff;
+  background-color: #4b246d;
+  border-color: #4b246d;
+}
+
+.v-pm-drill-down-number.btn-primary:not(:disabled):not(.disabled).active:focus,
+.v-pm-drill-down-number.btn-primary:not(:disabled):not(.disabled):active:focus,
+.show > .v-pm-drill-down-number.btn-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(108, 72, 180, 0.5);
+}
+.btn-link {
+  font-weight: 400;
+  color: #4b246d;
+  text-decoration: none;
+}
+.btn-link:hover {
+  font-weight: 400;
+  color: #5aa4c4;
+  text-decoration: none;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  color: #fff;
+  border-color: #4b246d;
+  background-color: #4b246d;
+}

workflow/engine/skinEngine/neoclassic/layout-viena.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="/webapp/css/app.css">
+</head>
+
+<body>
+  {bodyTemplate}  
+    <div id="app">
+    </div>
+</body>
+<script type="text/javascript" src="/webapp/js/home/main.js"></script>
+{header}
+</html>

workflow/engine/skinEngine/skinEngine.php

@@ -36,6 +36,7 @@ class SkinEngine
     private $layoutFileRaw = array();
     private $layoutFileTracker = array();
     private $layoutFileSubmenu = array();
+    private $layoutFileViena = array();
 
     private $cssFileName = '';
 
@@ -93,7 +94,7 @@ class SkinEngine
         $layoutFileRaw = $this->skinsBasePath . 'base' . PATH_SEP . 'layout-raw.html';
         $layoutFileTracker = $this->skinsBasePath . 'base' . PATH_SEP . 'layout-tracker.html';
         $layoutFileSubmenu = $this->skinsBasePath . 'base' . PATH_SEP . 'layout-submenu.html';
-
+        $layoutFileViena = $this->skinsBasePath . 'base' . PATH_SEP . 'layout-viena.html';
 
         //Based on requested Skin look if there is any registered with that name
         if (strtolower($this->mainSkin) != "classic") {
@@ -137,6 +138,9 @@ class SkinEngine
             if (file_exists($skinObject . PATH_SEP . 'layout-submenu.html')) {
                 $layoutFileSubmenu = $skinObject . PATH_SEP . 'layout-submenu.html';
             }
+            if (file_exists($skinObject . PATH_SEP . 'layout-viena.html')) {
+                $layoutFileViena = $skinObject . PATH_SEP . 'layout-viena.html';
+            }
         }
 
         $this->layoutFile = pathInfo($layoutFile);
@@ -145,6 +149,7 @@ class SkinEngine
         $this->layoutFileTracker = pathInfo($layoutFileTracker);
         $this->layoutFileRaw = pathInfo($layoutFileRaw);
         $this->layoutFileSubmenu = pathInfo($layoutFileSubmenu);
+        $this->layoutFileViena = pathInfo($layoutFileViena);
 
         $this->cssFileName = $this->mainSkin;
 
@@ -329,6 +334,26 @@ class SkinEngine
 
         echo $template->getOutputContent();
     }
+    
+    private function _viena() 
+    {
+        $oHeadPublisher = headPublisher::getSingleton();
+        $styles = "";
+        $header = $oHeadPublisher->getExtJsVariablesScript();
+        $header = $oHeadPublisher->getExtJsStylesheets($this->cssFileName . "-viena");
+        $templateFile = $this->layoutFile['dirname'] . PATH_SEP . $this->layoutFileViena['basename'];
+        if (file_exists($templateFile)) {
+            $body = ScriptVariables::render();
+            $template = new TemplatePower($templateFile);
+            $template->prepare();
+            $template->assign('header', $header);
+            $template->assign('bodyTemplate', $body);
+            echo $template->getOutputContent();
+        } else {
+            $userCanAccess = 1;
+            echo View::make('Views::home.home', compact("userCanAccess"))->render();
+        }
+    }
 
     private function _blank()
     {

workflow/engine/templates/designer/index.html

@@ -15,7 +15,7 @@
     {/foreach}
 
     <link rel="stylesheet" type="text/css" href="/lib-dev/css/jquery.layout.css" />
-    <link rel="stylesheet" type="text/css" href="/lib-dev/css/jquery-ui-1.10.3.custom.min.css" />
+    <link rel="stylesheet" type="text/css" href="/lib-dev/css/jquery-ui.min.css" />
     <!--<link rel="stylesheet" type="text/css" href="/lib/css/jquery.dataTables.css">-->
     <link rel="stylesheet" type="text/css" href="/css/fonts.css" />
     <link rel="stylesheet" type="text/css" href="/fonts/styles.php" />