Merge pull request #114 from modos189/ui

IITC-CE · Jul 14, 2023 · efee60a · efee60a
2 parents 9c1b203 + efaa6cd
commit efee60a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 31 deletions.
diff --git a/src/popup/components/Message.vue b/src/popup/components/Message.vue
@@ -32,17 +32,18 @@ export default {
 
 <style scoped>
 .message {
+  box-sizing: border-box;
   background: #333;
   position: absolute;
   bottom: -35px;
   width: 100%;
-  height: 35px;
+  height: 0;
   line-height: 35px;
   padding: 0 10px 0 10px;
   color: var(--color-white);
   font-weight: 400;
   white-space: nowrap;
-  transition: bottom 0.3s ease-in-out;
+  transition: bottom 0.3s ease-in-out, height 0.3s ease-in-out;
   z-index: 10;
 }
 #message::after {
@@ -56,13 +57,11 @@ export default {
 }
 .message.opened {
   bottom: 0;
+  height: 35px;
 }
 
 #app.is_safari .message {
   display: none;
-  left: 0;
-  bottom: 0;
-  right: 0;
 }
 
 #app.is_safari .message.opened {

diff --git a/src/popup/components/ProgressBar.vue b/src/popup/components/ProgressBar.vue
@@ -32,7 +32,7 @@ export default {
   top: 0;
   left: 0;
   padding-top: 50px;
-  width: calc(100% - 98px);
+  width: calc(100% - 147px);
   background-color: #222;
   animation: preloader-background ease-in-out 2s infinite;
 }

diff --git a/src/popup/components/SectionMainMenu.vue b/src/popup/components/SectionMainMenu.vue
@@ -39,30 +39,12 @@
         v-bind:text="_('noData')"
       ></Element>
     </div>
-    <div class="item-wrapper">
-      <Hr />
-    </div>
-    <div class="links-grid">
-      <Element
-        v-bind:class="'list__item_add'"
-        v-bind:text="_('addExternalPlugin')"
-        v-bind:icon_name="'add'"
-        v-on:item_onclick="openLink('/choose_file.html')"
-      ></Element>
-      <Element
-        v-bind:class="'list__item_homepage'"
-        v-bind:text="_('iitcHomePage')"
-        v-bind:icon_name="'link'"
-        v-on:item_onclick="openLink('https://iitc.app')"
-      ></Element>
-    </div>
   </div>
 </template>
 
 <script>
 import Title from "./Title";
 import SearchBar from "./SearchBar";
-import Hr from "./Hr.vue";
 import Element from "./Element";
 import ElementPlugin from "./ElementPlugin";
 import { mixin } from "./mixins.js";
@@ -132,15 +114,15 @@ export default {
       }
     }
   },
-  components: { Title, SearchBar, Hr, Element, ElementPlugin }
+  components: { Title, SearchBar, Element, ElementPlugin }
 };
 </script>
 
 <style scoped>
-.links-grid {
-  display: grid;
-  grid-template-columns: 50% 50%;
-  font-size: 90%;
+.list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .categories,

diff --git a/src/popup/components/Title.vue b/src/popup/components/Title.vue
@@ -11,19 +11,28 @@
       />
       <ProgressBar></ProgressBar>
     </div>
+    <div
+      class="title__button"
+      :title="_('addExternalPlugin')"
+      v-on:click="openLink('/choose_file.html')"
+    >
+      <i class="title__icon material-icons">add</i>
+    </div>
     <div class="title__button" v-on:click="openOptions">
-      <i class="title__settings material-icons">settings</i>
+      <i class="title__icon material-icons">settings</i>
     </div>
     <ToggleIITC></ToggleIITC>
   </div>
 </template>
 
 <script>
+import { mixin } from "./mixins.js";
 import ProgressBar from "./ProgressBar";
 import ToggleIITC from "./ToggleIITC";
 
 export default {
   name: "Title",
+  mixins: [mixin],
   methods: {
     openIITC: async function() {
       await browser.runtime.sendMessage({ type: "requestOpenIntel" });
@@ -64,7 +73,7 @@ export default {
 .title__button:hover {
   background: #333;
 }
-.title__settings {
+.title__icon {
   font-size: 24px;
   padding: 12px;
 }