1 files changed, 130 insertions, 0 deletions
diff --git a/common/src/main/webapp/usageguide/browser/templates/buttons.html b/common/src/main/webapp/usageguide/browser/templates/buttons.html
new file mode 100644
index 0000000..6261d5a
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/buttons.html
@@ -0,0 +1,130 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<h4>Types of Buttons</h4>
+
+<div id="buttonArea" ng-init="init()">
+    <h3> Default Buttons</h3>
+    <div id="defaultButtonArea"></div>
+    <h3>Visual Buttons</h3>
+    <div id="visualButtonArea"></div>
+    <h3>Different Sized Buttons</h3>
+    <div id="sizeButtonArea"></div>
+    <h3>Icon Buttons</h3>
+    <div id="iconButtonArea"></div>
+
+</div>
+<div class="shortnote">
+    <div class="shortnoteHeader">Usage</div>
+    <div class="shortnoteText">Create a div tag  in html file with specific id  for example defaultButtonArea,visualButtonArea, sizeButtonArea,iconButtonArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+    <br>
+    <div>HTML file:</div>
+    <pre><code>&ltdiv id="buttonArea" ng-init="init()"&gt&lt/div&gt</code></pre>
+    <pre><code>&ltdiv id="defaultButtonArea" &gt&lt/div&gt</code></pre>
+    <pre><code>&ltdiv id="visualButtonArea" &gt&lt/div&gt</code></pre>
+    <pre><code>&ltdiv id="sizeButtonArea" &gt&lt/div&gt</code></pre>
+    <pre><code>&ltdiv id="iconButtonArea" &gt&lt/div&gt</code></pre>
+    <br>
+    <div>Javascript file:</div>
+    <pre><code>
+       var data ={"default_btn_data" : {"def_button" : {"title":"Default"},"def_print_button" : {"title":"Print", "type":"btn btn-default", "gType": "glyphicon-print", "iconPosition":"left"},"def_print_button_right" : {"title":"Search", "type":"btn btn-default", "gType": "glyphicon-search", "iconPosition":"right"}},"visual_btn_data" : { "vis_pri_btn_data" : {"title":"Primary", "type":"primary"},"vis_sec_btn_data" : {"title":"Secondary", "type":"secondary"},"vis_succ_btn_data" : {"title":"Success", "type":"success"},"vis_inf_btn_data" : {"title":"Info", "type":"info"},"vis_warn_btn_data" : {"title":"Warning", "type":"warning"},"vis_dang_btn_data" : {"title":"Danger", "type":"danger"},"vis_link_btn_data" : {"title":"Link", "type":"link"}},"diffSize_btn_data" : {"size_small_btn_data" : {"title": "Small Button", "type": "primary", "size": "btn-sm"},"size_large_btn_data" : {"title": "Large Button", "type": "primary", "size": "btn-lg"},"size_block_btn_data" : {"title": "Large Block Button", "type": "primary", "size": "btn-lg btn-block"}},"icon_btn_data" : {"search_icon_btn_data" : {"title": "Search Icon", "type": "btn-default", "gType": "glyphicon-search"},"search_icon_styled_btn_data" : {"title": "Styled Search Icon", "type": "primary", "gType": "glyphicon-search"},"print_icon_btn_data" : {"title": "Print", "type": "primary btn-lg", "gType": "glyphicon-print"}}};
+
+        $scope.init = function() {
+                    defaultButtons();
+                    visualButtons();
+                    sizeButtons();
+                    iconButtons();
+        }
+
+           function defaultButtons(){
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+            var def_icon_button_tpl = $(modelTemplate).filter('#defaultIconButtons').html();
+
+            var html = Mustache.to_html(def_button_tpl, data.default_btn_data.def_button);
+            $('#defaultButtonArea').html(html);
+
+            var html = Mustache.to_html(def_icon_button_tpl, data.default_btn_data.def_print_button);
+            $('#defaultButtonArea').append(html);
+
+            var html = Mustache.to_html(def_icon_button_tpl, data.default_btn_data.def_print_button_right);
+            $('#defaultButtonArea').append(html);
+        }
+
+
+        function visualButtons(){
+
+            var visual_button_tpl = $(modelTemplate).filter('#visualButtons').html();
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_pri_btn_data);
+            $('#visualButtonArea').html(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_sec_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_succ_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_inf_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_warn_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_dang_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_link_btn_data);
+            $('#visualButtonArea').append(html);
+        }
+
+        function sizeButtons() {
+            var size_button_tpl = $(modelTemplate).filter('#sizeButtons').html();
+
+            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_small_btn_data);
+            $('#sizeButtonArea').html(html);
+
+            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_large_btn_data);
+            $('#sizeButtonArea').append(html);
+
+            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_block_btn_data);
+            $('#sizeButtonArea').append(html);
+
+        }
+
+        function iconButtons() {
+            var icon_button_tpl = $(modelTemplate).filter('#iconButtons').html();
+
+            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.search_icon_btn_data);
+            $('#iconButtonArea').html(html);
+
+            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.search_icon_styled_btn_data);
+            $('#iconButtonArea').append(html);
+
+            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.print_icon_btn_data);
+            $('#iconButtonArea').append(html);
+
+        }</code></pre>
+
+
+
+
+    </div>
+</div>
+
+
+