added a bar around the fabric controls

javascript/src/Plugins/qfq.fabric.js

@@ -20,6 +20,7 @@ $(function (n) {
         this.parentElement = {};
         this.rotation = 0;
         this.controlElement = $('<div>', {
+            class: 'qfq-fabric-bar',
             id: 'qfq-fabric-control'
         });
         this.emojiContainer = {};
@@ -86,7 +87,7 @@ $(function (n) {
 
         ModeSettings.prototype.setUpButtons = function() {
             var $controlWrapper = this.qFabric.controlElement;
-            var $buttonGroup = $("<div>", {class: "btn-group"});
+            var $buttonGroup = $("<div>", {class: "btn-group pull-left"});
             var that = this;
             this.myModes.modes.forEach(function(o) {
                 var $button = $("<button>", {
@@ -112,7 +113,7 @@ $(function (n) {
             $controlWrapper.append($buttonGroup);
 
 
-            var $colorSelector = $("<div>", {class: "color-picker"});
+            var $colorSelector = $("<div>", {class: "color-picker pull-right"});
             $controlWrapper.append($colorSelector);
             if (this.myModes.colors instanceof Array) {
                 this.myModes.colors.forEach(function (o) {

less/qfq-bs.css.less

@@ -243,6 +243,23 @@ select.qfq-locked:invalid {
 }
 
 // Fabric Plugin classes
+
+.qfq-fabric-bar {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  width: 100%;
+  min-height: 41px;
+  z-index: 100;
+  border: 1px solid #ccc;
+  background-color: #ededed;
+  padding: 5px;
+}
+
+.qfq-fabric-bar .btn {
+  padding: 3px 8px;
+}
+
 .fabric-text {
   width: 100%;
   height: 80px;
@@ -262,7 +279,7 @@ select.qfq-locked:invalid {
 }
 
 .color-picker {
-  margin-top: 5px;
+  margin-top: 2px;
 }
 
 .color-picker > button {

mockup/fabric.html

@@ -36,13 +36,13 @@
             </div>
         </div>
     </div>
-    <!-- remove this
-    <img src="mockData/Scan2a.jpeg" class="qfq-fabric-image" id="qfq-fabric-image-1"> </img>
-    -->
+
 
     <div class="row">
         <div class="col-md-4">
 
+
+
             <div class="fabric"
                  data-buttons="mockData/fabric.buttons.json"
                  data-emojis="mockData/qfq.emoji.json"