some gui polishing

2024-05-14 08:04:33 +00:00 · 2023-10-19 16:54:24 +02:00 · 2023-10-19 16:54:24 +02:00 · 678c69732c
parent aa8abf021e
commit 678c69732c
10 changed files with 81 additions and 39 deletions
--- a/gui_vue/package.json
+++ b/gui_vue/package.json
@ -55,7 +55,8 @@
    "socket.io": "^4.7.2",
    "uuid": "^9.0.0",
    "vue": "^3.3.4",
-    "vue-chartjs": "^5.2.0"
+    "vue-chartjs": "^5.2.0",
+    "vuemoji-picker": "^0.2.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.7.4",
--- a/gui_vue/src/components/chat_messages.vue
+++ b/gui_vue/src/components/chat_messages.vue
@ -94,13 +94,14 @@ function getDateTime(timestampRaw) {
  display: flex;
  align-items: center;
  text-align: center;
+  color: #6c757d;
 }

 .separator::before,
 .separator::after {
  content: "";
  flex: 1;
-  border-bottom: 1px solid #000;
+  border-bottom: 1px solid #adb5bd;
 }

 .separator:not(:empty)::before {
--- a/gui_vue/src/components/chat_navbar.vue
+++ b/gui_vue/src/components/chat_navbar.vue
@ -155,18 +155,18 @@ getRxBuffer()
  <nav class="navbar bg-body-tertiary border-bottom">
    <div class="container">
      <div class="row w-100">
-        <div class="col-4 p-0 me-2">
-          <div class="input-group bottom-0 m-0">
+        <div class="col-3 p-0 me-2">
+          <div class="input-group bottom-0 m-0 ms-1">
            <input
-              class="form-control w-50"
+              class="form-control"
              maxlength="9"
              style="text-transform: uppercase"
-              placeholder="DX CALL"
+              placeholder="callsign"
              @keypress.enter="newChat()"
             ref="newChatCall"
            />
            <button
-              class="btn btn-sm btn-success"
+              class="btn btn-sm btn-outline-success"
              id="createNewChatButton"
              type="button"
              title="Start a new chat (enter dx call sign first)"
@ -207,7 +207,7 @@ getRxBuffer()

 <div class="input-group mb-0 p-0  ">

-  <button type="button" class="btn btn-secondary" @click="syncWithTNC()">
+  <button type="button" class="btn btn-outline-secondary" @click="syncWithTNC()">
      TNC Sync
    </button>
 </div>
--- a/gui_vue/src/components/chat_new_message.vue
+++ b/gui_vue/src/components/chat_new_message.vue
@ -38,9 +38,20 @@ import {
 import { Line } from 'vue-chartjs'
 import { ref, computed } from 'vue';

+
+import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'
+
+const handleEmojiClick = (detail: EmojiClickEventDetail) => {
+chat.inputText += detail.unicode
+
+}
+
+
 const chatModuleMessage=ref(null);


+
+
 function transmitNewMessage(){

    chat.inputText = chat.inputText.trim();
@ -174,18 +185,28 @@ const speedChartData = computed(() => ({
                        ></label>

                        <div class="input-group bottom-0 ms-2">
-                          <!--<input class="form-control" maxlength="8" style="max-width: 6rem; text-transform:uppercase; display:none" id="chatModuleDxCall" placeholder="DX CALL"></input>-->
-                          <!--<button class="btn btn-sm btn-primary me-2" id="emojipickerbutton" type="button">-->
-                          <div class="input-group-text">
-                            <i
-                              id="emojipickerbutton"
-                              class="bi bi-emoji-smile p-0"
-                              style="font-size: 1rem"
-                            ></i>
-                          </div>
+
+                            <button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1"
+                            data-bs-toggle="modal" data-bs-target="#emojiPickerModal"
+                            data-bs-backdrop="false"
+                            >
+                                <i
+                                  id="emojipickerbutton"
+                                  class="bi bi-emoji-smile p-0"
+                                  style="font-size: 1rem"
+                                ></i>
+                            </button>
+
+
+
+                                        <!-- trigger file selection modal -->
+                            <button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1" data-bs-toggle="modal" data-bs-target="#fileSelectionModal">
+                              <i class="bi bi-paperclip" style="font-size: 1.2rem"></i>
+                            </button>
+

                          <textarea
-                            class="form-control"
+                            class="form-control border rounded-pill"
                            rows="1"
                            ref="chatModuleMessage"
                            placeholder="Message - Send with [Enter]"
@ -194,14 +215,10 @@ const speedChartData = computed(() => ({
                          ></textarea>


-                            <!-- trigger file selection modal -->
-                            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#fileSelectionModal">
-                              <i class="bi bi-paperclip" style="font-size: 1.2rem"></i>
-                            </button>


                            <button
-                              class="btn btn-sm btn-secondary me-2"
+                              class="btn btn-sm btn-secondary ms-1 me-2 rounded-pill"
                              @click="transmitNewMessage()"
                              type="button"
                            >
@ -270,5 +287,20 @@ const speedChartData = computed(() => ({
  </div>
                </div>

+<!-- Emoji Picker Modal -->
+<div class="modal fade" id="emojiPickerModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog  modal-sm">
+    <div class="modal-content">
+      <div class="modal-body p-0">
+        <VuemojiPicker @emojiClick="handleEmojiClick" />
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+
+</template>

-</template>
--- a/gui_vue/src/components/main_active_stats.vue
+++ b/gui_vue/src/components/main_active_stats.vue
@ -244,7 +244,7 @@ export default {
            <div class="btn-group" role="group" aria-label="Busy indicators">

              <button
-                class="btn btn-sm p-1 disabled"
+                class="btn btn-sm ms-1 p-1 disabled"
                type="button"
                data-bs-placement="top"
                data-bs-toggle="tooltip"
--- a/gui_vue/src/components/main_footer_navbar.vue
+++ b/gui_vue/src/components/main_footer_navbar.vue
@ -21,7 +21,7 @@ const state = useStateStore(pinia);
            class="btn btn-sm btn-secondary me-1"
            v-bind:class="{
              'bg-danger': state.ptt_state === 'True',
-              'bg-success': state.ptt_state === 'False',
+              'bg-secondary': state.ptt_state === 'False',
            }"
            id="ptt_state"
            type="button"
@ -30,6 +30,7 @@ const state = useStateStore(pinia);
            data-bs-trigger="hover"
            data-bs-html="true"
            title="PTT state:<strong class='text-success'>RECEIVING</strong> / <strong class='text-danger'>TRANSMITTING</strong>"
+            disabled
          >
            <i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
          </button>
@ -44,9 +45,10 @@ const state = useStateStore(pinia);
            data-bs-html="true"
            v-bind:class="{
              'bg-danger': state.busy_state === 'BUSY',
-              'bg-success': state.busy_state === 'IDLE',
+              'bg-secondary': state.busy_state === 'IDLE',
            }"
            title="TNC busy state: <strong class='text-success'>IDLE</strong> / <strong class='text-danger'>BUSY</strong>"
+            disabled
          >
            <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
          </button>
@ -62,8 +64,9 @@ const state = useStateStore(pinia);
            title="ARQ SESSION state: <strong class='text-warning'>OPEN</strong>"
            v-bind:class="{
              'bg-secondary': state.arq_session_state === 'disconnected',
-              'bg-success': state.arq_session_state === 'connected',
+              'bg-warning': state.arq_session_state === 'connected',
            }"
+            disabled
          >
            <i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
          </button>
@ -79,8 +82,9 @@ const state = useStateStore(pinia);
            title="DATA-CHANNEL state: <strong class='text-warning'>OPEN</strong>"
            v-bind:class="{
              'bg-secondary': state.arq_state === 'False',
-              'bg-success': state.arq_state === 'True',
+              'bg-warning': state.arq_state === 'True',
            }"
+            disabled
          >
            <i class="bi bi-file-earmark-binary" style="font-size: 0.8rem"></i>
          </button>
@ -153,11 +157,11 @@ const state = useStateStore(pinia);
              class="bi"
              style="font-size: 1rem"
              v-bind:class="{
-                'bi-reception-0': state.speed_level === 0,
-                'bi-reception-1': state.speed_level === 1,
-                'bi-reception-2': state.speed_level === 2,
-                'bi-reception-3': state.speed_level === 3,
-                'bi-reception-4': state.speed_level === 4,
+                'bi-reception-0': state.speed_level === '0',
+                'bi-reception-1': state.speed_level === '1',
+                'bi-reception-2': state.speed_level === '2',
+                'bi-reception-3': state.speed_level === '3',
+                'bi-reception-4': state.speed_level === '4',
              }"
            ></i>
          </button>
@ -225,7 +229,7 @@ const state = useStateStore(pinia);
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
-          <p class="justify-content-center m-0 d-flex position-absolute w-100">
+          <p class="justify-content-center m-0 d-flex position-absolute w-100 text-dark">
            {{ state.arq_seconds_until_finish }}s left
          </p>
        </div>
@ -244,9 +248,9 @@ const state = useStateStore(pinia);
            aria-valuemax="100"
          >
            <p
-              class="justify-content-center m-0 d-flex position-absolute w-100"
+              class="justify-content-center m-0 d-flex position-absolute w-100 text-dark"
            >
-              timeout in: {{ state.arq_seconds_until_timeout }}s
+              timeout in {{ state.arq_seconds_until_timeout }}s
            </p>
          </div>
        </div>
--- a/gui_vue/src/components/main_modals.vue
+++ b/gui_vue/src/components/main_modals.vue
@ -92,6 +92,7 @@ ChartJS.register(



+
 <!-- Message Info Modal -->
 <div class="modal fade" ref="modalEle" id="messageInfoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
--- a/gui_vue/src/js/sock.js
+++ b/gui_vue/src/js/sock.js
@ -167,7 +167,7 @@ client.on("data", function (socketdata) {
          continue;
        }
      }
-       // console.log(data)
+       //console.log(data)
      if (data["command"] == "tnc_state") {
        //console.log(data)
        // set length of RX Buffer to global variable
--- a/gui_vue/src/store/chatStore.js
+++ b/gui_vue/src/store/chatStore.js
@ -40,7 +40,7 @@ export const useChatStore = defineStore("chatStore", () => {
        }
    }
 });
-  var inputText = ref();
+  var inputText = ref('');
  var inputFile = ref();
  var inputFileName = ref();
  var inputFileType = ref();
--- a/gui_vue/src/styles.css
+++ b/gui_vue/src/styles.css
@ -107,3 +107,6 @@ https://stackoverflow.com/a/9622873
 [data-bs-theme="dark"] {
  /* default dark theme mods */
 }
+.modal-backdrop {
+   background-color: transparent;
+}