Task detail - side panel 4x

index.html

<div class="app-div"><div class="header-footer-wrapper"><div id="main" tabindex="2" 
                                                             class="middle-scrollable">
<div id="content" class="workspace-right clearfix ng-scope">
<div class="tp-full-height ng-scope"><div class="tp-workspace-tasks ng-scope">
<div class="workspace-right-edit ng-scope">
<form name="taskDetailForm" role="form" tp-submit="save(tp.taskDetailForm)" 
      class="ng-pristine ng-valid ng-valid-required">
<!-- task part -->                
<!-- task edit - side panel -->
<div class="task-right-panel noPadding">
<task-side-panel><div class="tp-aside">
  <span class="input-group-btn tp-task-edit text-right">
    <button type="button" class="tt-edit-mode tp-btn fa fa-pencil"></button>
  </span><!--pencil-->
  <div class="text-left">
    <div class="ng-isolate-scope"><div class="NOshow-editables">
      <div class="tp-property ng-scope">
          <div class="property-name">Priority:</div>
<!-------------------------------------------------->
          <div class="property-value">
            <tp-dropdown-combo class="ng-scope ng-isolate-scope"><tp-base-input>
              <div class="dropdown nowrap">
                <button class="tp-dropdown dropdown-toggle" type="button" 
                        data-toggle="dropdown" id="dropDownButton">
                  <span class="tp-dropdown-value ng-scope ng-binding"></span>
                  <div class="tp-dropdown-caret"><span class="caret"></span></div>
                </button>
                <ul class="tp-dropdown-menu" role="menu">
                  <li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" tabindex="-1"
                       title="kritická">
                      <span ng-if="doTranslate" class="ng-scope ng-binding">kritická</span>
                    </a>
                  </li><li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="HIGH" tabindex="-1" title="vysoká">
                      <span ng-if="doTranslate" class="ng-scope ng-binding">vysoká</span>
                    </a>
                  </li><li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="NORMAL" tabindex="-1" tp-click="changeModel(item)" title="normální">
                      <span ng-if="doTranslate" class="ng-scope ng-binding">normální</span>
                    </a>
                  </li><li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="LOW" tabindex="-1" tp-click="changeModel(item)" title="nízká">
                      <span class="ng-scope ng-binding">nízká</span>
                    </a>
                  </li>
                  <li role="separator" class="divider"></li>
                  <li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="UNDEFINED" tabindex="-1" 
                       title="nezadaná">
                      <span class="ng-scope ng-binding">nezadaná</span>
                    </a>
                  </li>
                </ul>
              </div>
              <div form="detailInnerForm" label="metaObject.label" form-controller="parent" display-type="inline" class="ng-isolate-scope"> </div>
            </tp-base-input></tp-dropdown-combo>
        <!------------------------------------------------------------------->
      </div></div></div></div><!--Priority: property-value, tp-property, ng-isolate-scope-->
    <div class="ng-isolate-scope"><div class="NOshow-editables">
        <div class="tp-property ng-scope">
          <div class="property-name ng-binding">Due date:</div>
          <div class="property-value">
            <tp-date-picker class="ng-scope ng-isolate-scope"><tp-base-input>
              <ng-form name="detailInnerForm" class="ng-pristine ng-valid">
                <p class="noMargin input-group date-default tp-datepicker-position-hack">
                  <input value="3. 8. 2015" type="text" id="dueDate" name="dueDate" class="ng-isolate-scope ng-pristine ng-valid ng-valid-required ng-valid-date">
                  <span class="input-group-btn">
                    <button type="button" class="tp-btn date-icon" tp-click="open($event)" ng-disabled="metaObject.validation.readonly || parent.$lockForSaving ? true : false"><em class="fa fa-calendar"></em></button>
                  </span>
                </p>
                <div form="detailInnerForm" label="metaObject.label" form-controller="parent" display-type="inline" class="ng-isolate-scope"></div>
              </ng-form>
            </tp-base-input></tp-date-picker><!-- end ngIf: form.editable -->
    </div></div></div></div><!--Due date: property-value, tp-property, ng-isolate-scope-->
    <div class="ng-isolate-scope"><div ng-mouseenter="flag()" class="NOshow-editables" >
      <div class="tp-property ng-scope">
        <div class="property-name">Agent:</div>
        <div class="property-value">
          <tp-dropdown-combo class="ng-scope ng-isolate-scope"><tp-base-input>
            <div class="dropdown nowrap">
              <button class="tp-dropdown dropdown-toggle" type="button" 
                      data-toggle="dropdown" id="dropDownButton">
                <span class="tp-dropdown-value ng-scope ng-binding"></span>
                <div class="tp-dropdown-caret"><span class="caret"></span></div>
              </button>
            </div>
            <div form="detailInnerForm" label="metaObject.label" form-controller="parent" display-type="inline" class="ng-isolate-scope"> </div>
          </tp-base-input></tp-dropdown-combo><!-- end ngIf: form.editable -->
    </div></div></div></div><!--Agent: property-value, tp-property, ng-isolate-scope-->
    <hr>
    <div class="tp-property">
      <div class="property-name ng-binding">Status:</div>
      <div class="property-value">
        <div class="tp-render-task-status status-color-new">
          <img class="status-icon" src="http://test.taskpool.net/getUserFile?customerId=377&filename=taskStatuses.svg#new">
          <span class="status-label ng-binding">New</span>
    </div></div></div><!--Status: tp-render-task-status, property-value, tp-property-->
    <hr>
    <div class="ng-isolate-scope"><div class="NOshow-editables">
        <div class="tp-property ng-scope">
          <div class="property-name ng-binding">Customer:</div>
          <div class="property-value">
            <tp-dropdown-combo class="ng-scope ng-isolate-scope"><tp-base-input>
              <div class="dropdown nowrap">
                <button class="tp-dropdown dropdown-toggle" type="button" 
                        data-toggle="dropdown" id="dropDownButton">
                  <span class="tp-dropdown-value ng-scope ng-binding">Jiří Černý</span>
                  <div class="tp-dropdown-caret"><span class="caret"></span></div>
                </button>
                <ul class="tp-dropdown-menu tt-agents" role="menu">
                  <li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" tabindex="-1"
                       title="kritická">
                      <b>Jiří Černý<br><span class="tt-pozice">Systems Administrator, ICT</span></b>
                    </a>
                  </li><li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="HIGH" tabindex="-1" title="vysoká">
                      Milan Janeček<br /><span class="tt-pozice">Key Account Manager, Sales</span>
                    </a>
                  </li><li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="NORMAL" tabindex="-1" tp-click="changeModel(item)" title="normální">
                      <span ng-if="doTranslate" class="ng-scope ng-binding">Radek Strnad<br /><span class="tt-pozice">ICT Manager, ICT</span></span>
                    </a>
                  </li><li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="LOW" tabindex="-1" tp-click="changeModel(item)" title="nízká">
                      Stephen Ball<br /><span class="tt-pozice">CIO, Cooper Group Inc.</span>
                    </a>
                  </li>
                  <li role="separator" class="divider"></li>
                  <li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="UNREGISTERED" tabindex="-1" 
                       title="nezadaná">
                      <span class="ng-scope ng-binding">neregistrovaný zákazník</span>
                    </a>
                  </li>
                  <li role="separator" class="divider bottom"></li>
                  <li role="presentation" class="ng-scope add-customer">
                    <a role="menuitem" href="" value="add-customer" tabindex="-1">
                      <span class="add-customer">Add new customer</span>
                    </a>
                  </li>
                </ul>
              </div>
              <div form="detailInnerForm" label="metaObject.label" form-controller="parent" display-type="inline" class="ng-isolate-scope"> </div>
            </tp-base-input></tp-dropdown-combo>
    </div></div></div></div><!--Customer: property-value, tp-property, ng-isolate-scope-->
    <div class="tp-property">
      <div class="property-name ng-binding">Submitted:</div>
      <div class="property-value">
        <tp-render-date-time-simple class="ng-scope"><span ng-class="{'date-past-text': past}" class="nowrap ng-binding">Today 11:06 AM</span></tp-render-date-time-simple>
    </div></div><!--Submitted: property-value, tp-property-->
    <hr>
  </div><!--text-left--><!-- Priority, Due date, Agent, Status, Customer, Submitted -->
</div></task-side-panel>
</div>
<div class="task-right-panel noPadding">
<task-side-panel><div class="tp-aside">
  <span class="input-group-btn tp-task-edit text-right">
    <button type="button" class="tt-edit-mode tp-btn fa fa-pencil"></button>
  </span><!--pencil-->
  <div class="text-left">
    <div class="ng-isolate-scope"><div class="NOshow-editables">
      <div class="tp-property ng-scope">
          <div class="property-name">Priority:</div>
<!-------------------------------------------------->
          <div class="property-value">
            <tp-dropdown-combo class="ng-scope ng-isolate-scope"><tp-base-input>
              <div class="dropdown nowrap">
                <button class="tp-dropdown dropdown-toggle" type="button" 
                        data-toggle="dropdown" id="dropDownButton">
                  <span class="tp-dropdown-value ng-scope ng-binding"></span>
                  <div class="tp-dropdown-caret"><span class="caret"></span></div>
                </button>
                <ul class="tp-dropdown-menu" role="menu">
                  <li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" tabindex="-1"
                       title="kritická">
                      <span ng-if="doTranslate" class="ng-scope ng-binding">kritická</span>
                    </a>
                  </li><li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="HIGH" tabindex="-1" title="vysoká">
                      <span ng-if="doTranslate" class="ng-scope ng-binding">vysoká</span>
                    </a>
                  </li><li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="NORMAL" tabindex="-1" tp-click="changeModel(item)" title="normální">
                      <span ng-if="doTranslate" class="ng-scope ng-binding">normální</span>
                    </a>
                  </li><li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="LOW" tabindex="-1" tp-click="changeModel(item)" title="nízká">
                      <span class="ng-scope ng-binding">nízká</span>
                    </a>
                  </li>
                  <li role="separator" class="divider"></li>
                  <li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="UNDEFINED" tabindex="-1" 
                       title="nezadaná">
                      <span class="ng-scope ng-binding">nezadaná</span>
                    </a>
                  </li>
                </ul>
              </div>
              <div form="detailInnerForm" label="metaObject.label" form-controller="parent" display-type="inline" class="ng-isolate-scope"> </div>
            </tp-base-input></tp-dropdown-combo>
        <!------------------------------------------------------------------->
      </div></div></div></div><!--Priority: property-value, tp-property, ng-isolate-scope-->
    <div class="ng-isolate-scope"><div class="NOshow-editables">
        <div class="tp-property ng-scope">
          <div class="property-name ng-binding">Due date:</div>
          <div class="property-value">
            <tp-date-picker class="ng-scope ng-isolate-scope"><tp-base-input>
              <ng-form name="detailInnerForm" class="ng-pristine ng-valid">
                <p class="noMargin input-group date-default tp-datepicker-position-hack">
                  <input value="3. 8. 2015" type="text" id="dueDate" name="dueDate" class="ng-isolate-scope ng-pristine ng-valid ng-valid-required ng-valid-date">
                  <span class="input-group-btn">
                    <button type="button" class="tp-btn date-icon" tp-click="open($event)" ng-disabled="metaObject.validation.readonly || parent.$lockForSaving ? true : false"><em class="fa fa-calendar"></em></button>
                  </span>
                </p>
                <div form="detailInnerForm" label="metaObject.label" form-controller="parent" display-type="inline" class="ng-isolate-scope"></div>
              </ng-form>
            </tp-base-input></tp-date-picker><!-- end ngIf: form.editable -->
    </div></div></div></div><!--Due date: property-value, tp-property, ng-isolate-scope-->
    <div class="ng-isolate-scope"><div ng-mouseenter="flag()" class="NOshow-editables" >
      <div class="tp-property ng-scope">
        <div class="property-name">Agent:</div>
        <div class="property-value">
          <tp-dropdown-combo class="ng-scope ng-isolate-scope"><tp-base-input>
            <div class="dropdown nowrap">
              <button class="tp-dropdown dropdown-toggle" type="button" 
                      data-toggle="dropdown" id="dropDownButton">
                <span class="tp-dropdown-value ng-scope ng-binding"></span>
                <div class="tp-dropdown-caret"><span class="caret"></span></div>
              </button>
            </div>
            <div form="detailInnerForm" label="metaObject.label" form-controller="parent" display-type="inline" class="ng-isolate-scope"> </div>
          </tp-base-input></tp-dropdown-combo><!-- end ngIf: form.editable -->
    </div></div></div></div><!--Agent: property-value, tp-property, ng-isolate-scope-->
    <hr>
    <div class="tp-property">
      <div class="property-name ng-binding">Status:</div>
      <div class="property-value">
        <div class="tp-render-task-status status-color-new">
          <img class="status-icon" src="http://test.taskpool.net/getUserFile?customerId=377&filename=taskStatuses.svg#new">
          <span class="status-label ng-binding">New</span>
    </div></div></div><!--Status: tp-render-task-status, property-value, tp-property-->
    <hr>
    <div class="ng-isolate-scope"><div class="NOshow-editables">
        <div class="tp-property ng-scope">
          <div class="property-name ng-binding">Customer:</div>
          <div class="property-value">
            <tp-dropdown-combo class="ng-scope ng-isolate-scope"><tp-base-input>
              <div class="dropdown nowrap">
                <button class="tp-dropdown dropdown-toggle" type="button" 
                        data-toggle="dropdown" id="dropDownButton">
                  <span class="tp-dropdown-value">Abraka dabra</span>
                  <div class="tp-dropdown-caret"><span class="caret"></span></div>
                </button>
                <ul class="tp-dropdown-menu tt-agents" role="menu">
                  <li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="customer-not-found" tabindex="-1" title="vysoká">
                      <span class="add-customer-for">Add customer: "Abraka dabra"</span>
                    </a>
                  </li>
                  <li disabled role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="customer-not-found" tabindex="-1" title="vysoká">
                      <span class="customer-not-found">No registered customer found for "Abraka dabra"</span>
                    </a>
                  </li>
                  <li role="separator" class="divider"></li>
                  <li role="presentation" class="ng-scope">
                    <a role="menuitem" href="" value="UNDEFINED" tabindex="-1" 
                       title="nezadaná">
                      <span class="ng-scope ng-binding">neregistrovaný zákazník</span>
                    </a>
                  </li>
                  <li role="separator" class="divider"></li>
                  <li role="presentation" class="ng-scope add-customer">
                    <a role="menuitem" href="" value="add-customer" tabindex="-1" title="vysoká">
                      <span class="add-customer">Add new customer</span>
                    </a>
                  </li>
                </ul>
              </div>
              <div form="detailInnerForm" label="metaObject.label" form-controller="parent" display-type="inline" class="ng-isolate-scope"> </div>
            </tp-base-input></tp-dropdown-combo>
    </div></div></div></div><!--Customer: property-value, tp-property, ng-isolate-scope-->
    <div class="tp-property">
      <div class="property-name ng-binding">Submitted:</div>
      <div class="property-value">
        <tp-render-date-time-simple class="ng-scope"><span ng-class="{'date-past-text': past}" class="nowrap ng-binding">Today 11:06 AM</span></tp-render-date-time-simple>
    </div></div><!--Submitted: property-value, tp-property-->
    <hr>
  </div><!--text-left--><!-- Priority, Due date, Agent, Status, Customer, Submitted -->
</div></task-side-panel>
</div>
<hr />
<div class="task-right-panel noPadding">
<task-side-panel><div class="tp-aside">
  <span class="input-group-btn tp-task-edit text-right">
    <button type="button" class="tp-btn fa fa-pencil"></button>
  </span><!--pencil-->
  <div class="text-left">
    <div class="ng-isolate-scope"><div class="show-editables">
      <div class="tp-property ng-scope">
          <div class="property-name">Priority:</div>
          <div class="property-value">
            <span>
              <span class="ng-binding">Normal</span>
            </span>
    </div></div></div></div><!--Priority: property-value, tp-property, ng-isolate-scope-->
    <div class="ng-isolate-scope"><div class="show-editables">
        <div class="tp-property ng-scope">
          <div class="property-name ng-binding">Due date:</div>
          <div class="property-value">
            <span>
              <span class="nowrap ng-binding">Thu Aug 6</span>
            </span>
    </div></div></div></div><!--Due date: property-value, tp-property, ng-isolate-scope-->
    <div class="ng-isolate-scope"><div ng-mouseenter="flag()" class="show-editables" >
        <div class="tp-property ng-scope">
          <div class="property-name">Agent:</div>
          <div class="property-value">
            <span ng-show="!form.editable">
              <span class="tp-customer-name ng-binding">Not set</span>
              <div class="tp-customer-position"></div>
            </span>
    </div></div></div></div><!--Agent: property-value, tp-property, ng-isolate-scope-->
    <hr>
    <div class="tp-property">
      <div class="property-name ng-binding">Status:</div>
      <div class="property-value">
        <div class="tp-render-task-status status-color-new">
          <img class="status-icon" src="http://test.taskpool.net/getUserFile?customerId=377&filename=taskStatuses.svg#new">
          <span class="status-label ng-binding">New</span>
    </div></div></div><!--Status: tp-render-task-status, property-value, tp-property-->
    <hr>
    <div class="ng-isolate-scope"><div class="show-editables">
        <div class="tp-property ng-scope">
          <div class="property-name ng-binding">Customer:</div>
          <div class="property-value">
            <span>
              <span class="tp-customer-name ng-binding">Milan Janeček</span>
              <tp-render-customer><div class="tp-customer-position">
                <span ng-if="position" class="ng-scope ng-binding">Key account manager</span>
                <span class="ng-scope">, </span>
                <span class="ng-scope ng-binding">Sales</span>
                </div></tp-render-customer>
            </span>
    </div></div></div></div><!--Customer: property-value, tp-property, ng-isolate-scope-->
    <div class="tp-property">
      <div class="property-name ng-binding">Submitted:</div>
      <div class="property-value">
        <tp-render-date-time-simple class="ng-scope"><span ng-class="{'date-past-text': past}" class="nowrap ng-binding">Today 11:06 AM</span></tp-render-date-time-simple>
    </div></div><!--Submitted: property-value, tp-property-->
    <hr>
  </div><!--text-left--><!-- Priority, Due date, Agent, Status, Customer, Submitted -->
</div></task-side-panel>
</div><!--task-right-panel-->
<div class="task-right-panel noPadding">
<task-side-panel><div class="tp-aside">
  <span class="input-group-btn tp-task-edit text-right">
    <button type="button" class="tp-btn fa fa-pencil"></button>
  </span><!--pencil-->
  <div class="text-left">
    <div class="ng-isolate-scope"><div class="show-editables">
      <div class="tp-property ng-scope">
          <div class="property-name">Priority:</div>
          <div class="property-value">
            <span>
              <span class="ng-binding">Normal</span>
            </span>
    </div></div></div></div><!--Priority: property-value, tp-property, ng-isolate-scope-->
    <div class="ng-isolate-scope"><div class="show-editables">
        <div class="tp-property ng-scope">
          <div class="property-name ng-binding">Due date:</div>
          <div class="property-value">
            <span>
              <span class="nowrap ng-binding">Thu Aug 6</span>
            </span>
    </div></div></div></div><!--Due date: property-value, tp-property, ng-isolate-scope-->
    <div class="ng-isolate-scope"><div ng-mouseenter="flag()" class="show-editables" >
        <div class="tp-property ng-scope">
          <div class="property-name">Agent:</div>
          <div class="property-value">
            <span ng-show="!form.editable">
              <span class="tp-customer-name ng-binding">Not set</span>
              <div class="tp-customer-position"></div>
            </span>
    </div></div></div></div><!--Agent: property-value, tp-property, ng-isolate-scope-->
    <hr>
    <div class="tp-property">
      <div class="property-name ng-binding">Status:</div>
      <div class="property-value">
        <div class="tp-render-task-status status-color-new">
          <img class="status-icon" src="http://test.taskpool.net/getUserFile?customerId=377&filename=taskStatuses.svg#new">
          <span class="status-label ng-binding">New</span>
    </div></div></div><!--Status: tp-render-task-status, property-value, tp-property-->
    <hr>
    <div class="ng-isolate-scope"><div class="show-editables">
        <div class="tp-property ng-scope">
          <div class="property-name ng-binding">Submitter:</div>
          <div class="property-value">
            <span>
              <span class="tp-customer-name ng-binding">Jiří Černý</span>
              <tp-render-customer><div class="tp-customer-position">
                <span ng-if="position" class="ng-scope ng-binding">Systems administrator</span>
                <span class="ng-scope">, </span>
                <span class="ng-scope ng-binding">ICT</span>
                </div></tp-render-customer>
            </span>
    </div></div></div></div><!--Customer: property-value, tp-property, ng-isolate-scope-->
    <div class="tp-property">
      <div class="property-name ng-binding">Submitted:</div>
      <div class="property-value">
        <tp-render-date-time-simple class="ng-scope"><span ng-class="{'date-past-text': past}" class="nowrap ng-binding">Today 11:06 AM</span></tp-render-date-time-simple>
    </div></div><!--Submitted: property-value, tp-property-->
    <hr>
  </div><!--text-left--><!-- Priority, Due date, Agent, Status, Customer, Submitted -->
</div></task-side-panel>
</div><!--task-right-panel-->
<div class="task-right-panel noPadding">
<task-side-panel><div class="tp-aside">
  <span class="input-group-btn tp-task-edit text-right">
    <button type="button" class="tp-btn fa fa-pencil"></button>
  </span><!--pencil-->
  <div class="text-left">
    <div class="ng-isolate-scope"><div class="show-editables">
      <div class="tp-property ng-scope">
          <div class="property-name">Priority:</div>
          <div class="property-value">
            <span>
              <span class="ng-binding">Normal</span>
            </span>
    </div></div></div></div><!--Priority: property-value, tp-property, ng-isolate-scope-->
    <div class="ng-isolate-scope"><div class="show-editables">
        <div class="tp-property ng-scope">
          <div class="property-name ng-binding">Due date:</div>
          <div class="property-value">
            <span>
              <span class="nowrap ng-binding">Thu Aug 6</span>
            </span>
    </div></div></div></div><!--Due date: property-value, tp-property, ng-isolate-scope-->
    <div class="ng-isolate-scope"><div ng-mouseenter="flag()" class="show-editables" >
        <div class="tp-property ng-scope">
          <div class="property-name">Agent:</div>
          <div class="property-value">
            <span ng-show="!form.editable">
              <span class="tp-customer-name ng-binding">Not set</span>
              <div class="tp-customer-position"></div>
            </span>
    </div></div></div></div><!--Agent: property-value, tp-property, ng-isolate-scope-->
    <hr>
    <div class="tp-property">
      <div class="property-name ng-binding">Status:</div>
      <div class="property-value">
        <div class="tp-render-task-status status-color-new">
          <img class="status-icon" src="http://test.taskpool.net/getUserFile?customerId=377&filename=taskStatuses.svg#new">
          <span class="status-label ng-binding">New</span>
    </div></div></div><!--Status: tp-render-task-status, property-value, tp-property-->
    <hr>
    <div class="ng-isolate-scope"><div class="show-editables">
        <div class="tp-property ng-scope">
          <div class="property-name ng-binding">Customer:</div>
          <div class="property-value">
            <span>
              <span style="font-weight:bold; font-size:11px; color: #999" class="tp-customer-position">Neregistrovaný:</span>
              <br /><span class="tp-customer-name ng-binding">Václav Král</span>
              <tp-render-customer><div class="tp-customer-position">
                <span ng-if="position" class="ng-scope ng-binding">řidič</span>
                <span class="ng-scope">, </span>
                <span class="ng-scope ng-binding">Modrava bus a.s.</span>
                <br /><span class="ng-scope ng-binding">kral.v@dpmx.cz</span>
                <br /><span class="ng-scope ng-binding">603 920 530</span>
                </div></tp-render-customer>
            </span>
    </div></div></div></div><!--Customer: property-value, tp-property, ng-isolate-scope-->
    <div class="tp-property">
      <div class="property-name ng-binding">Submitted:</div>
      <div class="property-value">
        <tp-render-date-time-simple class="ng-scope"><span ng-class="{'date-past-text': past}" class="nowrap ng-binding">Today 11:06 AM</span></tp-render-date-time-simple>
    </div></div><!--Submitted: property-value, tp-property-->
    <hr>
  </div><!--text-left--><!-- Priority, Due date, Agent, Status, Customer, Submitted -->
</div></task-side-panel>
</div><!--task-right-panel-->
<hr />
<!--task-right-panel-->
  
</form>
</div><!--workspace-right-edit-->
</div></div><!--tp-workspace-tasks, tp-full-height -->
</div><!-- #content -->
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><hr />
</div></div></div><!-- #main --><!-- header-footer-wrapper --><!-- app-div -->

script.js

$(".show-editables")
  .mouseenter(function() {
    $(".show-editables").toggleClass("higlight-editable");
    $(".tp-task-edit button").toggleClass("edit-buttton-active");
  })
  .mouseleave(function() {
    $(".show-editables").toggleClass("higlight-editable");
    $(".tp-task-edit button").toggleClass("edit-buttton-active");
  });

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

.higlight-editable { background-color: lightgray; }
.edit-buttton-active { border-color: #4a84b8; background-color: #4a84b8; color: #ffffff; }
.workspace-right {  margin-left: 0; }
.task-right-panel { position: static; }
.tp-dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.tp-dropdown-menu .divider.bottom {
}

.tt-edit-mode {
  border-color: #4a84b8;
  background-color: #4a84b8;
  color: #ffffff;
}
.tt-pozice {
  color: #999;
  font-size: 11px;
  position: relative;
  top: -1px;
}
.tt-agents {
  max-width: 249px;
  width: 249px;
}
span.add-customer {
  border: 1px solid #C7C7C7;
  background-color: #eee;
  padding: 0.25ex 2ex;
  position: relative;
  top: -1px;
}
[value=add-customer] {
  text-align: center;
}
li.add-customer {
  background-color: #f6f6f6;
  padding-top: 12px;
  padding-bottom: 8px;
  margin-top: -9px;
  margin-bottom: -5px;
}
.customer-not-found {
  /*hodnoty z .property-name */
  color: #b5b5b5;
  font-size: 0.9em;
}
.add-customer-for {
  font-weight: bold;
}

styles

<link href="https://tp3.taskpool.cz/common/resources/css/ui-bootstrap/bootstrap.css?v=1904" rel="stylesheet" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://tp3.taskpool.cz/internal-app/resources/css/main.css?v=1904" rel="stylesheet" />

Task detail - side panel 4x.markdown

Task detail - side panel 4x

A Pen by Tomáš Tintěra on CodePen.

License.

Task detail - side panel.markdown

Task detail - side panel

A Pen by Tomáš Tintěra on CodePen.

License.