Use of bootstrap panel instead of a custom style

IMA-WorldHealth · Jul 14, 2016 · 4155962 · 4155962
1 parent 109761f
commit 4155962
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 44 deletions.
diff --git a/client/src/js/components/bhFindDocument.js b/client/src/js/components/bhFindDocument.js
@@ -38,7 +38,6 @@ function FindDocumentComponent(Patient, Modal, Document, Notify, User, $translat
 
   /** expose to the view */
   vm.switchDisplay  = switchDisplay;
-  vm.toggleAction   = toggleAction;
   vm.addDocument    = addDocument;
   vm.deleteDocument = deleteDocument;
   vm.mimeIcon       = mimeIcon;
@@ -51,12 +50,6 @@ function FindDocumentComponent(Patient, Modal, Document, Notify, User, $translat
     vm.session.display = mode;
   }
 
-  /** toggle document actions */
-  function toggleAction(index) {
-    vm.selectedIndex = index;
-    vm.session.showAction = vm.session.showAction === true ? false : true;
-  }
-
   /** function add documents modal */
   function addDocument() {
     Modal.openUploadDocument({ patient_uuid: vm.session.patientUuid })

diff --git a/client/src/partials/patients/documents/documents.css b/client/src/partials/patients/documents/documents.css
@@ -3,14 +3,19 @@
   display: block;
   margin: 7px auto;
 }
+.panel .panel-heading > .right {
+  position: relative;
+  float: right;
+  top: -5px;
+}
 /* =========================== End Generic Style ========================== */
 
 
 /* ============================ Document style ============================= */
 .document {
   cursor: pointer;
   padding: 5px;
-  margin-bottom: 15px;
+  margin: 3px auto;
   border: 1px solid #ddd;
 }
 .document:hover {
@@ -53,30 +58,6 @@
 }
 /* ==================== End Document thumbnails style ====================== */
 
-/* ========================== New Bh-Panel style =========================== */
-.bh-panel.bh-panel-default {
-  border: 1px solid #ddd;
-}
-.bh-panel.bh-panel-default > .bh-panel-header {
-  background-color: #f5f5f5;
-  color: #333;
-  border-bottom: 1px solid #ddd;
-}
-.bh-panel > .bh-panel-header {
-  padding: 5px;
-  display: flex;
-  justify-content: space-between;
-}
-.bh-panel > .bh-panel-header > .icon {
-  padding-top: 5px;
-  padding-left: 7px;
-}
-.bh-panel > .bh-panel-body {
-  padding: 5px;
-  overflow: auto;
-}
-/* ========================== End New Bh-Panel style ======================= */
-
 
 /* ========================== Avatar thumbnail ============================= */
 .avatar-thumbnail {

diff --git a/client/src/partials/templates/bhFindDocument.tmpl.html b/client/src/partials/templates/bhFindDocument.tmpl.html
@@ -19,16 +19,11 @@
 </div>
 
 <!-- Documents  -->
-<div class="bh-panel bh-panel-default">
+<div class="panel panel-default clearfix">
 
   <!-- heading  -->
-  <div class="bh-panel-header" ng-if="$ctrl.session.enableOptionBar">
-    <div class="icon">
-      <i class="glyphicon glyphicon-paperclip"></i> {{ 'PATIENT_DOCUMENT.DOCUMENTS' | translate }}
-      ({{ $ctrl.session.patientDocuments.length }})
-    </div>
-
-    <div class="btn-group">
+  <div class="panel-heading" ng-if="$ctrl.session.enableOptionBar">
+    <div class="right btn-group">
       <button
         type="button"
         title="{{ 'PATIENT_DOCUMENT.DISPLAY_THUMBNAIL' | translate }}"
@@ -53,17 +48,22 @@
         <i class="fa fa-plus"></i>
       </button>
     </div>
+
+    <div>
+      <i class="glyphicon glyphicon-paperclip"></i> {{ 'PATIENT_DOCUMENT.DOCUMENTS' | translate }}
+      ({{ $ctrl.session.patientDocuments.length }})
+    </div>
   </div>
 
   <!-- content  -->
-  <div class="bh-panel-body" style="height: {{ $ctrl.session.height }}">
+  <div class="panel-body" style="overflow: auto; height: {{ $ctrl.session.height }}">
 
     <!-- list of documents  -->
     <ng-switch on="$ctrl.session.display">
       <!-- list dispaly mode  -->
       <div ng-switch-default>
         <ul class="media-list">
-            <li class="document media" ng-click="$ctrl.toggleAction($index)"
+            <li class="document media col-xs-12"
               ng-repeat="doc in $ctrl.session.patientDocuments | filter: $ctrl.searchByName">
               <a class="media-left">
                 <i class="fa fa-3x" ng-class="{{ '$ctrl.mimeIcon(doc.mimetype).icon' }}"></i>
@@ -94,7 +94,7 @@ <h4 class="media-heading">{{ doc.label }}</h4>
 
                 <!-- file size  -->
                 <i class="fa fa-file-o"></i>
-                {{ $ctrl.mimeIcon(doc.mimetype).label }} (~{{ doc.size | bytes }}) <br>
+                {{ $ctrl.mimeIcon(doc.mimetype).label }} (~{{ doc.size | bytes }}) |
 
                 <!-- date and author  -->
                 <i class="fa fa-calendar-o"></i>
@@ -107,7 +107,7 @@ <h4 class="media-heading">{{ doc.label }}</h4>
 
       <!-- thumbnail display mode  -->
       <div ng-switch-when="thumbnail">
-        <div class="document document-thumbnail col-xs-12 col-md-6" ng-click="$ctrl.toggleAction($index)"
+        <div class="document document-thumbnail col-xs-12 col-md-6"
             ng-repeat="doc in $ctrl.session.patientDocuments | filter: $ctrl.searchByName">
 
             <!-- the picture  -->