From 8f896e4ae080fdc2eaccd6bb36c2f8eca631cdb0 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Fri, 13 Nov 2020 07:40:16 +0100
Subject: [PATCH 1/4] Add title's to have tooltips for controls

---
 src/components/ftbot/BotControls.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/ftbot/BotControls.vue b/src/components/ftbot/BotControls.vue
index 42e0618c..6fa1cf4c 100644
--- a/src/components/ftbot/BotControls.vue
+++ b/src/components/ftbot/BotControls.vue
@@ -4,6 +4,7 @@
       <button
         class="btn btn-primary btn-sm col-md-5 m-1"
         :disabled="!isTrading || isRunning"
+        title="Start Trading"
         @click="startBot()"
       >
         Start
@@ -11,6 +12,7 @@
       <button
         class="btn btn-primary btn-sm col-md-5 m-1"
         :disabled="!isTrading || !isRunning"
+        title="Stop Trading - Also stops handling open trades."
         @click="stopBot()"
       >
         Stop
@@ -18,6 +20,7 @@
       <button
         class="btn btn-primary btn-sm col-md-5 m-1"
         :disabled="!isTrading || !isRunning"
+        title="StopBuy - Stops buying, but still handles open trades"
         @click="stopBuy()"
       >
         StopBuy
@@ -25,6 +28,7 @@
       <button
         class="btn btn-primary btn-sm col-md-5 m-1"
         :disabled="!isTrading"
+        title="Reload Config - reloads configuration including strategy, resetting all settings changed on the fly."
         @click="reloadConfig()"
       >
         Reload Config
@@ -33,6 +37,7 @@
         v-if="botState.forcebuy_enabled"
         class="btn btn-primary btn-sm col-md-5 m-1"
         :disabled="!isTrading || !isRunning"
+        title="Force Buy - Immediately buy an asset at an optional price. Sells are then handled according to strategy rules."
         @click="initiateForcebuy"
       >
         Forcebuy
@@ -41,6 +46,7 @@
         v-if="isWebserverMode"
         :disabled="isTrading"
         class="btn-primary col-md-5 m-1"
+        title="Start Trading mode"
         @click="startTrade()"
       >
         Start Trading

From cbf19818396445fdb16860df9d1d3c274b5c1d4f Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Fri, 13 Nov 2020 20:19:16 +0100
Subject: [PATCH 2/4] Add icons and restyle botcontrols

---
 package.json                           |  1 +
 src/components/ftbot/BotControls.vue   | 33 ++++++++++++++++----------
 src/components/ftbot/ReloadControl.vue | 19 ++++++++++-----
 yarn.lock                              |  5 ++++
 4 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index ee3bc1d2..90276886 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "vue-class-component": "^7.2.5",
     "vue-echarts": "^5.0.0-beta.0",
     "vue-grid-layout": "^2.3.11",
+    "vue-material-design-icons": "^4.11.0",
     "vue-property-decorator": "^9.0.2",
     "vue-router": "^3.4.9",
     "vuex": "^3.5.1",
diff --git a/src/components/ftbot/BotControls.vue b/src/components/ftbot/BotControls.vue
index 6fa1cf4c..d9d51e9c 100644
--- a/src/components/ftbot/BotControls.vue
+++ b/src/components/ftbot/BotControls.vue
@@ -2,54 +2,54 @@
   <div class="container-fluid">
     <div class="row">
       <button
-        class="btn btn-primary btn-sm col-md-5 m-1"
+        class="btn btn-secondary btn-sm ml-1"
         :disabled="!isTrading || isRunning"
         title="Start Trading"
         @click="startBot()"
       >
-        Start
+        <PlayIcon />
       </button>
       <button
-        class="btn btn-primary btn-sm col-md-5 m-1"
+        class="btn btn-secondary btn-sm ml-1"
         :disabled="!isTrading || !isRunning"
         title="Stop Trading - Also stops handling open trades."
         @click="stopBot()"
       >
-        Stop
+        <StopIcon />
       </button>
       <button
-        class="btn btn-primary btn-sm col-md-5 m-1"
+        class="btn btn-secondary btn-sm ml-1"
         :disabled="!isTrading || !isRunning"
         title="StopBuy - Stops buying, but still handles open trades"
         @click="stopBuy()"
       >
-        StopBuy
+        <PauseIcon />
       </button>
       <button
-        class="btn btn-primary btn-sm col-md-5 m-1"
+        class="btn btn-secondary btn-sm ml-1"
         :disabled="!isTrading"
         title="Reload Config - reloads configuration including strategy, resetting all settings changed on the fly."
         @click="reloadConfig()"
       >
-        Reload Config
+        <ReloadIcon />
       </button>
       <button
         v-if="botState.forcebuy_enabled"
-        class="btn btn-primary btn-sm col-md-5 m-1"
+        class="btn btn-secondary btn-sm ml-1"
         :disabled="!isTrading || !isRunning"
         title="Force Buy - Immediately buy an asset at an optional price. Sells are then handled according to strategy rules."
         @click="initiateForcebuy"
       >
-        Forcebuy
+        <ForceBuyIcon />
       </button>
       <button
         v-if="isWebserverMode"
         :disabled="isTrading"
-        class="btn-primary col-md-5 m-1"
+        class="btn btn-secondary btn-sm col-md-5 ml-1"
         title="Start Trading mode"
         @click="startTrade()"
       >
-        Start Trading
+        <PlayIcon />
       </button>
       <ForceBuyForm :modal-show="forcebuyShow" @close="this.$bvModal.hide('forcebuy-modal')" />
     </div>
@@ -61,11 +61,18 @@ import { Component, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 import { BotState } from '@/types';
 import { BotStoreGetters } from '@/store/modules/ftbot';
+import PlayIcon from 'vue-material-design-icons/Play.vue';
+import StopIcon from 'vue-material-design-icons/Stop.vue';
+import PauseIcon from 'vue-material-design-icons/Pause.vue';
+import ReloadIcon from 'vue-material-design-icons/Reload.vue';
+import ForceBuyIcon from 'vue-material-design-icons/BankPlus.vue';
 import ForceBuyForm from './ForceBuyForm.vue';
 
 const ftbot = namespace('ftbot');
 
-@Component({ components: { ForceBuyForm } })
+@Component({
+  components: { ForceBuyForm, PlayIcon, StopIcon, PauseIcon, ReloadIcon, ForceBuyIcon },
+})
 export default class BotControls extends Vue {
   forcebuyShow = false;
 
diff --git a/src/components/ftbot/ReloadControl.vue b/src/components/ftbot/ReloadControl.vue
index aad86535..68083987 100644
--- a/src/components/ftbot/ReloadControl.vue
+++ b/src/components/ftbot/ReloadControl.vue
@@ -1,18 +1,25 @@
 <template>
-  <div>
-    <button class="btn btn-secondary btn-sm" @click="refreshAll(true)">Refresh all</button>
+  <div class="container-fluid">
+    <div class="row">
+      <button class="m-1 btn btn-primary" @click="refreshAll(true)"><RefreshIcon /></button>
 
-    <b-form-checkbox v-model="autoRefreshLoc" class="float-right" size="sm" switch
-      >AutoRefresh</b-form-checkbox
-    >
+      <b-form-checkbox
+        v-model="autoRefreshLoc"
+        class="ml-auto float-right mr-2"
+        title="AutoRefresh"
+        switch
+        >AutoRefresh</b-form-checkbox
+      >
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator';
 import { Action, State } from 'vuex-class';
+import RefreshIcon from 'vue-material-design-icons/Refresh.vue';
 
-@Component({})
+@Component({ components: { RefreshIcon } })
 export default class ReloadControl extends Vue {
   refreshInterval: number | null = null;
 
diff --git a/yarn.lock b/yarn.lock
index d30d41f5..9d7b41f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10895,6 +10895,11 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-material-design-icons@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/vue-material-design-icons/-/vue-material-design-icons-4.11.0.tgz#11356194846a5806d958ede531291605cc314b33"
+  integrity sha512-3Tyeqi9jtONQ/x8WkJqiBs4t5Bd5O1t7RdM/GIPKVYoVdaRy0oy3nbRjnMGyONBlqC/NpPjzhWeoZWUMEI04nA==
+
 vue-property-decorator@^9.0.2:
   version "9.0.2"
   resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-9.0.2.tgz#118459d77b4d5613ab2bbccba2edd5d7af685d30"

From b316f8550d1073a00174983227a6cab598b83a61 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Fri, 20 Nov 2020 06:48:18 +0100
Subject: [PATCH 3/4] Improve layout of small buttons

---
 src/components/ftbot/ReloadControl.vue | 2 +-
 src/store/modules/layout.ts            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ftbot/ReloadControl.vue b/src/components/ftbot/ReloadControl.vue
index 68083987..0ca73901 100644
--- a/src/components/ftbot/ReloadControl.vue
+++ b/src/components/ftbot/ReloadControl.vue
@@ -5,7 +5,7 @@
 
       <b-form-checkbox
         v-model="autoRefreshLoc"
-        class="ml-auto float-right mr-2"
+        class="ml-auto float-right mr-2 my-auto"
         title="AutoRefresh"
         switch
         >AutoRefresh</b-form-checkbox
diff --git a/src/store/modules/layout.ts b/src/store/modules/layout.ts
index ecf029d6..5e4c792b 100644
--- a/src/store/modules/layout.ts
+++ b/src/store/modules/layout.ts
@@ -36,7 +36,7 @@ export enum LayoutMutations {
 
 // Define default layouts
 const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
-  { i: TradeLayout.botControls, x: 0, y: 0, w: 4, h: 4 },
+  { i: TradeLayout.botControls, x: 0, y: 0, w: 3, h: 4 },
   { i: TradeLayout.multiPane, x: 0, y: 0, w: 4, h: 7 },
   { i: TradeLayout.chartView, x: 4, y: 0, w: 8, h: 11 },
   { i: TradeLayout.tradeDetail, x: 0, y: 11, w: 5, h: 6 },

From 041bca890ca470b5cb0bcb844334959618a0a98a Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Fri, 20 Nov 2020 06:54:42 +0100
Subject: [PATCH 4/4] Use better icon for Forcebuy

---
 src/components/ftbot/BotControls.vue | 4 ++--
 src/store/modules/layout.ts          | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ftbot/BotControls.vue b/src/components/ftbot/BotControls.vue
index d9d51e9c..0c7a59bb 100644
--- a/src/components/ftbot/BotControls.vue
+++ b/src/components/ftbot/BotControls.vue
@@ -45,7 +45,7 @@
       <button
         v-if="isWebserverMode"
         :disabled="isTrading"
-        class="btn btn-secondary btn-sm col-md-5 ml-1"
+        class="btn btn-secondary btn-sm ml-1"
         title="Start Trading mode"
         @click="startTrade()"
       >
@@ -65,7 +65,7 @@ import PlayIcon from 'vue-material-design-icons/Play.vue';
 import StopIcon from 'vue-material-design-icons/Stop.vue';
 import PauseIcon from 'vue-material-design-icons/Pause.vue';
 import ReloadIcon from 'vue-material-design-icons/Reload.vue';
-import ForceBuyIcon from 'vue-material-design-icons/BankPlus.vue';
+import ForceBuyIcon from 'vue-material-design-icons/PlusBoxMultipleOutline.vue';
 import ForceBuyForm from './ForceBuyForm.vue';
 
 const ftbot = namespace('ftbot');
diff --git a/src/store/modules/layout.ts b/src/store/modules/layout.ts
index 5e4c792b..ff129ccd 100644
--- a/src/store/modules/layout.ts
+++ b/src/store/modules/layout.ts
@@ -36,8 +36,8 @@ export enum LayoutMutations {
 
 // Define default layouts
 const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
-  { i: TradeLayout.botControls, x: 0, y: 0, w: 3, h: 4 },
-  { i: TradeLayout.multiPane, x: 0, y: 0, w: 4, h: 7 },
+  { i: TradeLayout.botControls, x: 0, y: 0, w: 3, h: 3 },
+  { i: TradeLayout.multiPane, x: 0, y: 3, w: 4, h: 7 },
   { i: TradeLayout.chartView, x: 4, y: 0, w: 8, h: 11 },
   { i: TradeLayout.tradeDetail, x: 0, y: 11, w: 5, h: 6 },
   { i: TradeLayout.openTrades, x: 5, y: 11, w: 7, h: 5 },