Merge pull request #543 from dabeng/oc-icons

Remove the dependency of font-awesome
dabeng · Jan 20, 2020 · b846576 · b846576
2 parents f3db92a + 45bee67
commit b846576
Show file tree

Hide file tree

Showing 40 changed files with 705 additions and 226 deletions.
diff --git a/demo/ajax-datasource.html b/demo/ajax-datasource.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
 </head>

diff --git a/demo/bottom2top.html b/demo/bottom2top.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
 </head>

diff --git a/demo/center-on-selected-node.html b/demo/center-on-selected-node.html
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/color-coded.html b/demo/color-coded.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/css/style.css b/demo/css/style.css
@@ -7,8 +7,6 @@ html,body {
 
 body {
   font-family: Arial;
-  font-size: 14px;
-  line-height: 1.428571429;
   color: #333333;
 }
 

diff --git a/demo/custom-template.html b/demo/custom-template.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
 </head>

diff --git a/demo/default-collapsed.html b/demo/default-collapsed.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
 </head>

diff --git a/demo/drag-drop.html b/demo/drag-drop.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/edit-chart.html b/demo/edit-chart.html
@@ -4,16 +4,13 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
     #chart-container { background-color: #eee; height: 500px; }
     .orgchart { background: #fff; }
     .orgchart.edit-state .edge { display: none; }
-    .orgchart .node { width: 150px; }
     .orgchart .node .title { height: 30px; line-height: 30px; }
-    .orgchart .node .title .symbol { margin-top: 1px; }
     #edit-panel {
       position: relative;
       left: 10px;
@@ -25,7 +22,17 @@
       color: #fff;
       background-color: #449d44;
     }
-    #edit-panel .btn-inputs { font-size: 24px; }
+    #edit-panel .btn-inputs::before {
+      background-color: #fff;
+      color: #449d44;
+      width: 1.5rem;
+      height: 1.5rem;
+      border-radius: 0.75rem;
+      font-size: 1.5rem;
+    }
+    #edit-panel .btn-inputs { vertical-align: sub; }
+    #edit-panel.edit-parent-node .btn-inputs { display: none; }
+    #edit-panel .btn-inputs:hover::before { font-weight: bolder; }
     #edit-panel.edit-state>:not(#chart-state-panel) { display: none; }
     #edit-panel label { font-weight: bold; }
     #edit-panel.edit-parent-node .selected-node-group { display: none; }
@@ -64,9 +71,6 @@
       vertical-align: text-top;
     }
     #new-nodelist>* { padding-bottom: 4px; }
-    .btn-inputs { vertical-align: sub; }
-    #edit-panel.edit-parent-node .btn-inputs { display: none; }
-    .btn-inputs:hover { text-shadow: 0 0 4px #fff; }
     .radio-panel input[type='radio'] { display: inline-block;height: 24px;width: 24px;vertical-align: top; }
     #edit-panel.view-state .radio-panel input[type='radio']+label { vertical-align: -webkit-baseline-middle; }
     #btn-add-nodes { margin-left: 20px; }
@@ -85,8 +89,8 @@
     <ul id="new-nodelist">
       <li><input type="text" class="new-node"></li>
     </ul>
-    <i class="fa fa-plus-circle btn-inputs" id="btn-add-input"></i>
-    <i class="fa fa-minus-circle btn-inputs" id="btn-remove-input"></i>
+    <i class="oci oci-plus-circle btn-inputs" id="btn-add-input"></i>
+    <i class="oci oci-minus-circle btn-inputs" id="btn-remove-input"></i>
     <span id="node-type-panel" class="radio-panel">
       <input type="radio" name="node-type" id="rd-parent" value="parent"><label for="rd-parent">Parent(root)</label>
       <input type="radio" name="node-type" id="rd-child" value="children"><label for="rd-child">Child</label>
@@ -120,7 +124,6 @@
       'chartClass': 'edit-state',
       'exportButton': true,
       'exportFilename': 'SportsChart',
-      'parentNodeSymbol': 'fa-th-large',
       'createNode': function($node, data) {
         $node[0].id = getId();
       }
@@ -203,7 +206,6 @@
             'data' : { 'name': nodeVals[0] },
             'exportButton': true,
             'exportFilename': 'SportsChart',
-            'parentNodeSymbol': 'fa-th-large',
             'createNode': function($node, data) {
               $node[0].id = getId();
             }

diff --git a/demo/expand-to-given-depth.html b/demo/expand-to-given-depth.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/export-chart-pdf.html b/demo/export-chart-pdf.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
@@ -17,7 +16,7 @@
 
   <script src="js/jquery.min.js"></script>
   <!-- the following reference is specific for IE -->
-  <script type="text/javascript" src="https://cdn.rawgit.com/stefanpenner/es6-promise/master/dist/es6-promise.auto.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
   <script type="text/javascript" src="js/html2canvas.min.js"></script>
   <script type="text/javascript" src="js/jspdf.min.js"></script>
   <script type="text/javascript" src="js/jquery.orgchart.js"></script>

diff --git a/demo/export-chart.html b/demo/export-chart.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
@@ -17,7 +16,7 @@
 
   <script src="js/jquery.min.js"></script>
   <!-- the following reference is specific for IE -->
-  <script type="text/javascript" src="https://cdn.rawgit.com/stefanpenner/es6-promise/master/dist/es6-promise.auto.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
   <script type="text/javascript" src="js/html2canvas.min.js"></script>
   <script type="text/javascript" src="js/jspdf.min.js"></script>
   <script type="text/javascript" src="js/jquery.orgchart.js"></script>

diff --git a/demo/filter-node.html b/demo/filter-node.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/get-hierarchy.html b/demo/get-hierarchy.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/integrate-map.html b/demo/integrate-map.html
@@ -5,7 +5,6 @@
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.css">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/left2right.html b/demo/left2right.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/link-node.html b/demo/link-node.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/local-datasource.html b/demo/local-datasource.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
 </head>

diff --git a/demo/multiple-layers.html b/demo/multiple-layers.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
@@ -15,11 +14,12 @@
       right: -10px;
       top: -10px;
       z-index: 2;
-      color: rgba(68, 157, 68, 0.5);
-      font-size: 24px;
       position: absolute;
     }
-    .orgchart .drill-icon:hover { color: #449d44; }
+    .orgchart .drill-icon::before {
+      background-color: rgba(68, 157, 68, 0.5);
+    }
+    .orgchart .drill-icon:hover::before { background-color: #449d44; }
     .orgchart .node:hover .drill-icon { opacity: 1; }
   </style>
 </head>
@@ -92,7 +92,7 @@
         if ($node.is('.drill-down')) {
           var assoClass = data.className.match(/asso-\w+/)[0];
           var drillDownIcon = $('<i>', {
-            'class': 'fa fa-arrow-circle-down drill-icon',
+            'class': 'oci oci-arrow-circle-down drill-icon',
             'click': function() {
               $('#chart-container').find('.orgchart:visible').addClass('hidden');
               if (!$('#chart-container').find('.orgchart.' + assoClass).length) {
@@ -106,7 +106,7 @@
         } else if ($node.is('.drill-up')) {
           var assoClass = data.className.match(/asso-\w+/)[0];
           var drillUpIcon = $('<i>', {
-            'class': 'fa fa-arrow-circle-up drill-icon',
+            'class': 'oci oci-arrow-circle-up drill-icon',
             'click': function() {
               $('#chart-container').find('.orgchart:visible').addClass('hidden').end()
                 .find('.drill-down.' + assoClass).closest('.orgchart').removeClass('hidden');

diff --git a/demo/ondemand-loading-data.html b/demo/ondemand-loading-data.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
 </head>

diff --git a/demo/option-createNode.html b/demo/option-createNode.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
@@ -14,11 +13,10 @@
       right: -5px;
       top: -5px;
       z-index: 2;
-      color: rgba(68, 157, 68, 0.5);
-      font-size: 18px;
       position: absolute;
     }
-    .orgchart .second-menu-icon:hover { color: #449d44; }
+    .orgchart .second-menu-icon::before { background-color: rgba(68, 157, 68, 0.5); }
+    .orgchart .second-menu-icon:hover::before { background-color: #449d44; }
     .orgchart .node:hover .second-menu-icon { opacity: 1; }
     .orgchart .node .second-menu {
       display: none;
@@ -80,7 +78,7 @@
       'nodeID': 'id',
       'createNode': function($node, data) {
         var secondMenuIcon = $('<i>', {
-          'class': 'fa fa-info-circle second-menu-icon',
+          'class': 'oci oci-info-circle second-menu-icon',
           click: function() {
             $(this).siblings('.second-menu').toggle();
           }

diff --git a/demo/pan-zoom.html b/demo/pan-zoom.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
 </head>

diff --git a/demo/reload-data.html b/demo/reload-data.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
 </head>

diff --git a/demo/report-path.html b/demo/report-path.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/responsive-design.html b/demo/responsive-design.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/right2left.html b/demo/right2left.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/toggle-sibs-resp.html b/demo/toggle-sibs-resp.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
 </head>

diff --git a/demo/ul-datasource.html b/demo/ul-datasource.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">

diff --git a/demo/vertical-level.html b/demo/vertical-level.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Organization Chart Plugin</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/font-awesome.min.css">
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">