BUG 9693 Make editable the HTML layout from uxs Simplified... SOLVED

- No was could change template on skin uxs. - Was add the folder "templates" on folder "simplified" where find the templates de skin uxs. - note: only was can enable one skin uxs for server.
2012-10-03 11:24:07 -04:00
parent 4753d4d29e
commit fd1c0f0473
8 changed files with 753 additions and 9 deletions
--- a/workflow/engine/controllers/home.php
+++ b/workflow/engine/controllers/home.php
@@ -14,6 +14,7 @@ class Home extends Controller
  private $userFullName;
  private $userRolName;
  private $userUxType;
+  private $userUxBaseTemplate;

  private $appListStart = 0;
  private $appListLimit = 15;
@@ -30,6 +31,7 @@ class Home extends Controller
    // getting the ux type from user o group conf.
    $this->userUxType = isset($_SESSION['user_experience'])? $_SESSION['user_experience']: 'SIMPLIFIED';
    $this->lastSkin   = isset($_SESSION['user_last_skin']) ? $_SESSION['user_last_skin'] : 'classic';
+    $this->userUxBaseTemplate = (is_dir(PATH_CUSTOM_SKINS . 'uxs')) ? PATH_CUSTOM_SKINS . 'simplified' . PATH_SEP . 'templates' . PATH_SEP : 'home' . PATH_SEP;

    if (isset($_SESSION['USER_LOGGED']) && !empty($_SESSION['USER_LOGGED'])) {
      $this->userID       = isset($_SESSION['USER_LOGGED']) ? $_SESSION['USER_LOGGED'] : null;
@@ -59,7 +61,7 @@ class Home extends Controller
    $this->setVar('pwd', $data['p']);
    $this->setVar('skin', $skin);

-    $this->setView("home/$template");
+    $this->setView($this->userUxBaseTemplate."$template");
    $this->render();
  }

@@ -127,7 +129,7 @@ class Home extends Controller
      }
    }

-    $this->setView('home/index');
+    $this->setView($this->userUxBaseTemplate.'index');

    $this->setVar('usrUid', $this->userID);
    $this->setVar('userName', $this->userName);
@@ -155,8 +157,8 @@ class Home extends Controller

    if (!isset($cases['data'][0])) {
      //the current user has not any aplication to do
-      $this->setView('home/indexSingle');
-      $this->setVar('default_url', 'home/error?no=2');
+      $this->setView($this->userUxBaseTemplate.'indexSingle');
+      $this->setVar('default_url', $this->userUxBaseTemplate.'error?no=2');
      $this->render();
      exit();
    }
@@ -172,7 +174,7 @@ class Home extends Controller
    $lastStep['title'] = G::LoadTranslation('ID_FINISH');
    $steps[] = $lastStep;

-    $this->setView('home/indexSingle');
+    $this->setView($this->userUxBaseTemplate.'indexSingle');

    $this->setVar('usrUid', $this->userID);
    $this->setVar('userName', $this->userName);
@@ -207,7 +209,7 @@ class Home extends Controller
        $cases = $this->getAppsData($httpData->t);

        // settings html template
-        $this->setView('home/appList');
+        $this->setView($this->userUxBaseTemplate.'appList');

        // settings vars and rendering
        $this->setVar('cases', $cases['data']);
@@ -224,7 +226,7 @@ class Home extends Controller
  {
    $cases = $this->getAppsData($httpData->t, $httpData->start, $httpData->limit);

-    $this->setView('home/applications');
+    $this->setView($this->userUxBaseTemplate.'applications');
    $this->setVar('cases', $cases['data']);
    $this->render();
  }
@@ -304,8 +306,8 @@ class Home extends Controller
    $httpData->no = isset($httpData->no) ? $httpData->no : 0;

    switch ($httpData->no) {
-      case 2:  $tpl = 'home/noAppsMsg'; break;
-      default: $tpl = 'home/error';
+      case 2:  $tpl = $this->userUxBaseTemplate.'noAppsMsg'; break;
+      default: $tpl = $this->userUxBaseTemplate.'error';
    }

    $this->setView($tpl);
--- a/workflow/engine/skinEngine/simplified/templates/appList.html
+++ b/workflow/engine/skinEngine/simplified/templates/appList.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> 
+  
+  <link rel="stylesheet" href="/css/simplified.css" media="screen" rel="stylesheet" type="text/css" />
+  <link rel="stylesheet" href="/js/jquery/css/smoothness/jquery-ui-1.8.17.custom.css" type="text/css">
+  <!--<link rel="stylesheet" href="/js/jquery/css/redmond/jquery-ui-1.7.2.custom.css" type="text/css">-->
+
+  <script type="text/javascript" src="/js/jquery/jquery-1.7.1.min.js"></script>
+  <script type="text/javascript" src="/js/jquery/jquery-ui-1.8.17.min.js"></script>
+
+  {literal}
+  <style>
+  body {
+    /*width: 500px;*/
+    margin: 10px auto;
+    /*color: #999;*/
+    font: 90%/150% Arial, Helvetica, sans-serif;
+    /*margin : 0px;*/
+    color  : #808080;
+    /*font   : normal 8pt sans-serif,Tahoma,MiscFixed;*/
+    background-color:#ECECEC;
+
+  }
+
+  #note_text {
+    width:100%;
+    height:52px;
+  }
+
+  .postitem:hover{
+    /*background:#EFEFEF;*/
+  }
+  </style>
+
+  <script>
+  function resize()
+  {
+    var h = $(document.body).height() - 52;
+    var w = $(document.body).width();
+    if (w > 600) {
+      w = 600;
+    }
+
+    $('.content-header').width(w-50);
+  }
+
+  function showNt(appUid)
+  {
+    var d = $('#m_'+appUid);
+
+    if (d.css('display') == 'block') {
+      d.hide('slow');
+    }
+    else {
+      d.show('slow');
+    }
+  }
+
+  function addNt(appUid)
+  {
+    $('textarea#note_text').val('');
+    $( "#dialog-add-note" ).dialog({
+      resizable: false,
+      height:178,
+      modal: true,
+      buttons: {
+        "Add Note": function() {
+          $(this).dialog("close");
+          $.post(
+            '../appProxy/postNote',
+            {appUid: appUid, noteText: $('textarea#note_text').val()},
+            function(responseText) {
+              updateNt(appUid);
+            }
+          );
+          //redirect('home/startCase?id='+id);
+        },
+        Cancel: function() {
+          $(this).dialog( "close" );
+        }
+      }
+    });
+  }
+
+  function updateNt(appUid)
+  {
+    $.post(
+      '../appProxy/getNotesList?appUid='+appUid,
+      {start:0, limit:100},
+      function(resp) {
+        data = jQuery.parseJSON(resp);
+        content = $('div#m_'+appUid);
+        content.html('');
+        
+        for (i=0; i<data.notes.length; i++) {
+          r = data.notes[i];
+          
+          s = '<div class="appMessage"><table border="0"><tr>' +
+                '<td width="50" valign="top">'+
+                  '<img border="0" src="../users/users_ViewPhotoGrid?pUID='+r.USR_UID+'" width="40" height="40"/>' +
+                '</td><td>' +
+                  '<h3>'+r.USR_FIRSTNAME+' '+r.USR_LASTNAME+' ('+r.USR_USERNAME+')</h3>' +
+                  '<p><pre>'+r.NOTE_CONTENT+'</pre>' +
+                  '<div class="appMessageDate">Posted at '+r.NOTE_DATE+'</div>' +
+                '</td></tr></table></div>';
+          
+          content.append(s);
+          $('#n_'+appUid).show('slow');
+        }
+        d = $('#m_'+appUid);
+        d.show('slow');
+      }
+    );
+    return true;
+  }
+
+  $(document).ready(function(){
+    $("#loadmorebutton").click(function (){
+      $('#loadmorebutton').html('<img src="/images/ajax-loader.gif" />');
+      $.ajax({
+        url: "getApps?t="+listType+"&start="+appListStart+"&limit="+appListLimit,
+        success: function(html){
+          appListStart += appListLimit;
+
+          if(jQuery.trim(html) != ''){
+            $("#commentlist").append(html);
+            $('#loadmorebutton').html('Load More');
+          }
+          else {
+            $('#loadmorebutton').replaceWith('<center>No more applications to show.</center>');
+          }
+        }
+      });
+
+      return false;
+    });
+  });
+  {/literal}
+
+  var appListLimit = {$appListLimit};
+  var appListStart = {$appListStart};
+  var listType     = '{$listType}';
+  </script>
+  
+</head>
+
+<body onload="resize()" onresize="resize()" > 
+  <center>
+    <div class="content-header" style="text-align:left">
+      <h1 style="padding: 10px">{$title} ({$cases_count})</h1>
+      <ul id="commentlist">
+        {include file='home/applications.html'}
+      </ul>
+
+      {if $cases_count > $appListLimit}
+      <center>
+        <a href="#" style="color:#1F98C7; font-size:12px; font-weight:bold;" id="loadmorebutton">Load More</a>
+      </center>
+      {/if}
+    </div>
+  </center>
+
+  <div id="dialog-add-note" title="Case Note" style="display:none">
+    <p><!-- <span class="ui-icon ui-icon-document" style="float:left; margin:0 7px 20px 0;"></span> -->
+    <span id="startAppTitle"/>
+    <textarea id="note_text" rows="2" cols="22"></textarea>
+    </p>
+  </div>
+  <br/>
+ </body>
+ </html>
--- a/workflow/engine/skinEngine/simplified/templates/applications.html
+++ b/workflow/engine/skinEngine/simplified/templates/applications.html
@@ -0,0 +1,51 @@
+{foreach from=$cases key=id item=APP}
+<li class="postitem">
+  <span class="commentnumber">
+    #{$APP.APP_NUMBER}
+  </span>
+  
+  <span id="n_{$APP.APP_UID}" class="notes-link" style="display:{if $APP.NOTES_COUNT neq 0}block{else}none{/if}">
+    <a href="#" onclick="showNt('{$APP.APP_UID}'); return false;"><img src="/images/simplified/messages-grey.png" height="20" width="20" border="0"></a>
+  </span>
+  
+  <span class="notes-plus-link">
+    <a href="#" onclick="addNt('{$APP.APP_UID}', '{$APP.APP_UID}'); return false;"><img src="/images/simplified/messages-grey-plus.png" height="21" width="21" border="0"></a>
+  </span>
+  
+  <p>
+    <cite>
+      <a href="../cases/cases_Open?APP_UID={$APP.APP_UID}&DEL_INDEX={$APP.DEL_INDEX}&action=todo">{$APP.APP_TITLE}</a>
+    </cite>
+  </p>
+  <p class="time">
+    {if $APP.APP_DEL_PREVIOUS_USER != ''}
+    From {$APP.APP_DEL_PREVIOUS_USER}, send at
+    {/if}
+    {$APP.DEL_DELEGATE_DATE}
+  </p>
+  <p>{$APP.APP_PRO_TITLE}
+  <br/>{$APP.APP_TAS_TITLE}</p>
+  
+  <div id="m_{$APP.APP_UID}" class="appMessages">
+  {if $APP.NOTES_COUNT neq 0}
+    {foreach from=$APP.NOTES_LIST key=k item=NOTE}
+      <div class="appMessage">
+      <table border="0">
+      <tr>
+        <td width="50" valign="top">
+          <img border="0" src="../users/users_ViewPhotoGrid?pUID={$NOTE.USR_UID}" width="40" height="40"/>
+        </td>
+        <td>
+          <h3>{$NOTE.USR_FIRSTNAME} {$NOTE.USR_LASTNAME} ({$NOTE.USR_USERNAME})</h3>
+          <p><pre>{$NOTE.NOTE_CONTENT}</pre>
+          <div class="appMessageDate">Posted at {$NOTE.NOTE_DATE}</div>
+        </td>
+      </tr>
+      </table>
+      </div>
+    {/foreach}
+  {/if}
+  </div>
+
+</li>
+{/foreach}
--- a/workflow/engine/skinEngine/simplified/templates/index.html
+++ b/workflow/engine/skinEngine/simplified/templates/index.html
@@ -0,0 +1,205 @@
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> 
+
+  <link rel="shortcut icon" href="/images/favicon.ico"   type="image/x-icon"/>
+  <!--<link rel="stylesheet" href="/js/jquery/css/redmond/jquery-ui-1.7.2.custom.css" type="text/css">-->
+  <link rel="stylesheet" href="/js/jquery/css/smoothness/jquery-ui-1.8.17.custom.css" type="text/css">
+  <link rel="stylesheet" href="/css/simplified.css" media="screen" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript" src="/js/jquery/jquery-1.7.1.min.js"></script>
+  <script type="text/javascript" src="/js/jquery/jquery-ui-1.8.17.min.js"></script>
+  
+  {if $clientBrowser neq 'msie'}
+  <style>
+  {literal}
+  body {
+    padding-top : 40px !important;
+    overflow    : hidden;
+  }
+  </style>
+  {/literal}
+  {/if}
+
+  {literal}
+  <script>
+  var ux_env = {ver: '1.0'};
+
+  function resize()
+  {
+    var h = $(window).height() - 42;
+    $('iframe').height(h)
+  }
+  
+  function redirect(url)
+  {
+    var $iframe = $('#iframex');
+    $iframe.attr('src', url);   
+    return false;
+  }
+
+  function appStart(id, title)
+  {
+    $('#startAppTitle').html(title)
+
+    $( "#dialog-confirm" ).dialog({
+      resizable: false,
+      height:160,
+      modal: true,
+      buttons: {
+        "Start Case": function() {
+          $( this ).dialog( "close" );
+          redirect('home/startCase?id='+id);
+        },
+        Cancel: function() {
+          $( this ).dialog( "close" );
+        }
+      }
+    });
+  }
+
+  /*function setActive(o) 
+  {
+    if (o.id == 'inboxOp') {
+      o.setAttribute('class', 'active');
+    }
+    else {
+      o.setAttribute('class', ''); 
+    }
+  }*/
+
+  //$("div.topbar ul li a").
+
+ 
+  </script>
+  {/literal}
+
+</head>
+<body onload="resize()" onresize="resize()" > 
+  <div class="global-nav">
+    <!-- start topbar -->     
+    <div class="topbar" id="corpBar">
+      <div class="topbar-bg"></div>
+      <div class="topbar-inner">
+        <div class="fixed-container clearfix">
+          <!-- <a href="" title="_title / Home" accesskey="1" id="logo">_title</a> -->
+
+          <ul class="nav primary-nav">
+            <!--
+            <li class="account">
+              <a class="menu user-actions active" href="#" onclick="redirect('home/appList?t=todo');" title="My Inbox">
+                <img alt="" src="/images/simplified/in-set-grey.png" id="inboxOp" />
+            -->
+                <!-- <span class="menu-label screen-name">new cases</span> -->
+            <!--
+              </a>
+            </li>
+            -->
+
+            {if count($arrayMnuOption) > 0}
+              {foreach from=$arrayMnuOption key=index item=option}
+              <li class="account">
+                <a class="menu user-actions" href="javascript:;" onclick="redirect('{$option.url}');" title="{$option.label}">
+                  <img src="{$option.icon}" alt="" />
+                </a>
+              </li>
+              {/foreach}
+            {/if}
+            
+            {if $canStartCase neq false && count($mnuNewCase) > 0}
+            <li class="account">
+              <a class="menu user-actions" href="javascript:;" title="{$mnuNewCase.label}" id="_new">
+                <img src="{$mnuNewCase.icon}" alt="" />
+              </a>
+
+              <ul class="menu-dropdown" style="width: 360px">
+                {foreach from=$processList key=id item=proc}
+                <li>
+                  <a href="javascript:;" onclick="appStart('{$proc.uid}', '{$proc.value}')" accesskey="s" title="" id="settings_link">{$proc.value}</a>
+                </li>
+                {/foreach}
+              </ul>
+            </li>
+            {/if}
+          </ul> 
+
+          <ul class="nav secondary-nav">
+            <li class="account">
+              <a class="menu user-photo" href="javascript:;">
+                <img alt="user_avatar_mini" height="24" src="users/users_ViewPhotoGrid?pUID={$usrUid}" width="24" />
+                <span class="menu-label screen-name">{$userName}</span>
+              </a>
+
+              <ul class="menu-dropdown">
+                <!--<li><a href="#" accesskey="s" id="settings_link">Settings</a></li>
+                <li><a href="#" accesskey="?" id="help_link">Help</a></li>-->
+                {if $userUxType eq 'SWITCHABLE'}
+                <li><a href="{$switchLink}" accesskey="?" id="help_link">Switch Interface</a></li>
+                {/if}
+                <li><a href="home/login" accesskey="l" id="sign_out_link">Sign out</a></li>
+              </ul>
+            </li>
+          </ul>
+
+        </div> <!-- /fixed-container -->
+      </div> <!-- /topbar-inner -->
+    </div>
+    <!-- end topbar -->     
+  </div>
+
+  <iframe id="iframex" name="iframex" src="home/appList" width="100%" height="800" scrolling="yes" frameborder="0"></iframe>
+  
+  <div id="dialog-confirm" title="Confirm" style="display:none">
+    <p>
+    Start a new case for:<br/>
+    <span class="ui-icon ui-icon-document" style="float:left; margin:0 7px 20px 0;"></span><span id="startAppTitle"/></p>
+  </div>
+
+  {literal} 
+  <script type="text/javascript">
+    // Javascript to toggle the dropdowns
+    $(document).ready(function(){
+      // Dropdowns
+      $("body").bind("click", function(e) {
+        $("ul.menu-dropdown").hide();
+        $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
+      });
+
+      $("a.menu").click(function() {
+        if ($(this).parent("li").hasClass("open")) {
+          $(this).parent("li").removeClass("open");
+          $(this).siblings("ul.menu-dropdown").hide();
+        } else {
+          $(this).parent("li").addClass("open");
+          $(this).siblings("ul.menu-dropdown").show();
+        }
+        $(this).parent("li").siblings("li").children("ul.menu-dropdown").hide();
+        $(this).parent("li").siblings("li").removeClass("open");
+        return false;
+      });
+
+      
+      // To hide some actived menu clicking on inner iframe content
+      $('iframe').load(function(){
+        var iframeDoc = $('iframe').contents().get(0);
+        // Bind event to iframe document
+        $(iframeDoc).bind('click', function( event ) {
+          $("ul.menu-dropdown").hide();
+          $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
+        });
+
+      })
+
+     
+      $('ul.primary-nav').children('li').children('a').click(function(i, el){
+        $('ul.primary-nav').children('li').children('a').attr('class', 'menu user-actions');
+        $(this).attr('class', 'menu user-actions active');
+      });
+
+    });
+  </script>
+  {/literal}
+
+</body>
+</html>
--- a/workflow/engine/skinEngine/simplified/templates/indexSingle.html
+++ b/workflow/engine/skinEngine/simplified/templates/indexSingle.html
@@ -0,0 +1,92 @@
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> 
+
+  <link rel="shortcut icon" href="/images/favicon.ico"   type="image/x-icon"/>
+  <link rel="stylesheet" href="/js/jquery/css/smoothness/jquery-ui-1.8.17.custom.css" type="text/css">
+  <link rel="stylesheet" href="/css/simplified.css" media="screen" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript" src="/js/jquery/jquery-1.7.1.min.js"></script>
+  <script type="text/javascript" src="/js/jquery/jquery-ui-1.8.17.min.js"></script>
+  <script type="text/javascript" src="/js/jquery/xbreadcrumbs.js"></script>
+
+  
+  {literal}
+  <style>
+  body {
+    padding-top: 40px;
+    overflow:hidden;
+  }
+  </style>
+
+  <!--[if IE]>
+  <style type="text/css">
+  body {
+    padding-top: 0px !important;
+  }
+  .global-nav-2 {
+    border-bottom: 1.5px solid #d5d5d5;
+  }
+  </style>
+  <![endif]-->
+
+  <script>
+  var ux_env = {ver: '1.0'};
+  //var simplified = {};
+
+  function resize() 
+  {
+    var h = $(window).height() - 42;
+    $('iframe').height(h)
+  }
+
+  function setCurrent(id) 
+  {
+    $('#' + id).trigger('click');
+  }
+
+  </script>
+  {/literal}
+
+</head>
+<body onload="resize()" onresize="resize()" > 
+  <div style="top:40px;"/>
+  <div id="global-nav-2" class="global-nav-2">
+    <!-- start topbar -->
+     
+    <ul class="xbreadcrumbs" id="breadcrumbs-1">
+      {if count($steps) > 0}
+        {foreach from=$steps key=i item=step}
+          <li id="{$step.id}"{if $i eq "0"} class="current"{/if}>
+           <a{if $i eq "0"} class="home"{/if} href="{$step.url}" target="iframex">{$i+1}. {$step.title}</a>
+          </li>
+        {/foreach}
+      {else}
+        <li></li>
+      {/if}
+    </ul>
+    
+    <a id="signout-link" href="home/login" title="Sign out"><img src="/images/simplified/logout-grey.png" /></a>
+    
+    <!-- end topbar -->
+  </div>
+  
+  <iframe id="iframex" name="iframex" src="{$default_url}" width="100%" height="800" scrolling="yes" frameborder="0"></iframe>
+  
+  <div id="dialog-confirm" title="Confirm" style="display:none">
+    <p>
+    Start a new case for:<br/>
+    <span class="ui-icon ui-icon-document" style="float:left; margin:0 7px 20px 0;"></span><span id="startAppTitle"/></p>
+  </div>
+
+  {literal}
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('#breadcrumbs-1').xBreadcrumbs({ collapsible: ($(window).width() < 500 ?  true : false)});
+    });
+  </script>
+  {/literal}
+
+</body>
+</html>
--- a/workflow/engine/skinEngine/simplified/templates/login_ie.html
+++ b/workflow/engine/skinEngine/simplified/templates/login_ie.html
@@ -0,0 +1,77 @@
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
+  <!--<script type="text/javascript" src="/js/jquery/jquery-1.7.1.min.js"></script>-->
+  <link rel="stylesheet" href="/css/{$skin}.css" media="screen" rel="stylesheet" type="text/css" />
+  {literal}
+  <style>
+  body {
+    background-color: #142F3C;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#142F3C',endColorstr='#1D4558');
+  }
+
+  div.borderForm {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 300px;
+    height: 140px;
+    margin-top: -140px;
+    margin-left: -210px;
+    overflow: none;          
+  }
+
+  </style>
+  {/literal}
+</head>
+
+<body onload="resize()" onresize="resize()" >
+<center>
+  <form method="post" action="../login/authentication" class="formDefault">
+    <div class="borderForm" style="width:400px; padding-left:0; padding-right:0; border-width:1;">
+      <div class="boxTop"><div class="a"></div><div class="b"></div><div class="c"></div></div>
+      <div class="content" style="height:100%;">
+      <table width="99%">
+        <tr>
+        <td valign='top'>
+          <table cellspacing="0" cellpadding="0" border="0" width="100%">
+            <tr>
+              <td class='FormTitle' colspan="2" align=""><span id='form[TITLE]' name='form[TITLE]' >Login</span></td>
+            </tr>
+            <tr>
+              <td class='FormLabel' width="40%">User</td>
+              <td class='FormFieldContent' width='240' >
+                <input class="module_app_input___gray" name="form[USR_USERNAME]" type="text" size="30" maxlength="50" value=""/>
+              </td>
+            </tr>
+            <tr>
+              <td class='FormLabel' width="40%">Password</td>
+              <td class='FormFieldContent' width='240' >
+                <input class="module_app_input___gray" name="form[USR_PASSWORD]" type ="password" size="31" maxlength="50" value=""/>
+              </td>
+            </tr>
+            <!-- <tr>
+              <td class='FormLabel' width="40%">Language</td>
+              <td class='FormFieldContent' width='240' ><select  class="module_app_input___gray" id="form[USER_LANG]" name="form[USER_LANG]"   pm:label="Language"  pm:dependent="0" ><option value="en" >English</option></select></td>
+            </tr> -->
+            <tr>
+              <td class='FormButton' colspan="2" align="">
+                <br/>
+                <input class='module_app_button___gray ' name="form[BSUBMIT]" type='submit' value="Login" />
+              </td>
+            </tr>
+          </table>
+        </td>
+        </tr>
+      </table>
+      </div>
+      <div class="boxBottom"><div class="a"></div><div class="b"></div><div class="c"></div></div>
+    </div>
+  </form>
+</center>
+</body>
+
+</html>
+
+
--- a/workflow/engine/skinEngine/simplified/templates/login_standard.html
+++ b/workflow/engine/skinEngine/simplified/templates/login_standard.html
@@ -0,0 +1,102 @@
+<html>
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
+  <script type="text/javascript" src="/js/jquery/jquery-1.7.1.min.js"></script>
+  <link rel="stylesheet" href="/css/simplified.css" media="screen" rel="stylesheet" type="text/css" />
+  {literal}
+  <script>
+    $(document).ready(function() {
+      function start() {
+        //Fade in the Popup
+        $('#login').fadeIn(1000);
+        
+        //Set the center alignment padding + border see css style
+        var popMargTop = ($('#login').height() + 24) / 2;
+        var popMargLeft = ($('#login').width() + 24) / 2; 
+        
+        if (!jQuery.browser.msie) {
+          $('#login').css({ 
+            'margin-top' : -popMargTop,
+            'margin-left' : -popMargLeft
+          });
+          
+          // Add the mask to body
+          $('body').append('<div id="mask"></div>');
+          $('#mask').fadeIn(0);
+        }
+        else {
+          $('#login').css({ 
+            'margin-top' : (($(window).height()/2) - 140)
+          });
+        }
+        return false;
+      }
+      
+      start();
+      //$('#login').fadeIn(1000);
+    });
+
+    function resize()
+    {
+      var h = $(document.body).height() - 52;
+      var w = $(document.body).width();
+      if (w > 400) w = 400;
+
+      $('#login').width(w-50);
+
+      var popMargTop = ($('#login').height() + 24) / 2;
+      var popMargLeft = ($('#login').width() + 5) / 2; 
+      
+      $('#login').css({ 
+          'margin-top' : -popMargTop,
+          'margin-left' : -popMargLeft
+      });
+    }
+
+
+  </script>
+  {/literal}
+</head>
+
+<body onload="resize()" onresize="resize()" >
+<center>
+  <form method="post" action="../login/authentication">
+    <div id="login" class="login_form">
+      <h1>Sign In</h1>
+
+      <div class="login_message">{$msg}</div>
+
+      <table border=0 width="100%" cellspacing="0" cellpadding="0" class="formbody">
+        <tr>
+          <td><label for="login_field">Username</label></td>
+        </tr>
+        <tr>
+          <td>
+            <input id="login_field" class="text" style="width: 100%;" type="text" value="{$usr}" tabindex="1"  name="form[USR_USERNAME]" autocapitalize="off" />
+          </td>
+        </tr>
+        <tr>
+          <td><label for="password">Password</label></td>
+        </tr>
+        <tr>
+          <td>
+            <input id="password" class="text" style="width: 100%;" type="password" value="{$pwd}" tabindex="2"  name="form[USR_PASSWORD]" autocomplete="disabled" />
+          </td>
+        </tr>
+        <tr>
+          <td align="center">
+            <label class="submit_btn"><input type="submit" value="Log in" tabindex="3" name="commit" /></label>
+          </td>
+        </tr>
+      </table>
+    </div>     
+  </form>
+</center>
+</body>
+
+</html>
+
+
+
--- a/workflow/engine/skinEngine/simplified/templates/noAppsMsg.html
+++ b/workflow/engine/skinEngine/simplified/templates/noAppsMsg.html
@@ -0,0 +1,41 @@
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
+  <link rel="stylesheet" href="/css/uxs.css" media="screen" rel="stylesheet" type="text/css" />
+  <script type="text/javascript" src="/js/jquery/jquery-1.7.1.min.js"></script>
+  {literal}
+  <style>
+  @media only screen and (min-device-width: 768px)  {
+    .uxs { width: 550px; }
+  }
+  
+  </style>
+  <script>
+  $(document).ready(function() {
+    $('#btnRefresh').click(function(){
+      if (typeof parent != 'undefined') {
+        parent.location.href = '../home';
+      }
+    })
+  });
+  </script>
+  {/literal}
+</head>
+
+<body>
+<center>
+  <div class="uxs" style="text-align:left">
+    <table cellspacing="0" cellpadding="0" border="0" width="100%">
+      <tr><td class="Title">Information</td></tr>
+    </table>
+    <h2></h2>
+    <h3>You are now finished. Please refresh your view to see if you have any more work pending.</h3>
+    <center>
+      <button id="btnRefresh">Refresh view</button>
+    </center>
+  </div>
+</center>
+</body>
+</html>
+