Fixes

Tom4nt · Jan 9, 2021 · bb4538f · bb4538f
1 parent 03c1091
commit bb4538f
Show file tree

Hide file tree

Showing 20 changed files with 66 additions and 56 deletions.
diff --git a/app/css/ActionpanelContainer.css b/app/css/ActionpanelContainer.css
@@ -6,7 +6,7 @@
     background-color: var(--color-normalL);
     box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.3);
     transition: all 0.15s;
-    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+    transition-timing-function: cubic-bezier(0.13, 0.93, 0.18, 1.26);
     padding: 16px;
     transform-origin: bottom right;
 }

diff --git a/app/css/Dropdown.css b/app/css/Dropdown.css
@@ -7,7 +7,7 @@ ms-dropdown {
     border-radius: 4px;
     padding: 8px;
     background-color: var(--color-normal);
-    border: 1px solid var(--color-darkL);
+    border: 1px solid var(--color-normalD);
     color: var(--color-white);
     outline: none;
     width: 100%;
@@ -45,16 +45,16 @@ ms-dropdown {
     visibility: hidden;
     box-sizing: border-box;
     overflow-y: auto;
-    background-color: var(--color-darkL);
-    border: 1px solid var(--color-dark);
+    background-color: var(--color-normal);
+    border: 1px solid var(--color-normalD);
     border-radius: 0 0 4px 4px;
     width: 100%;
     height: 0;
     position: absolute;
     top: 32px;
     left: 0;
-    transition: height 0.3s, visibility 0.12s;
-    transition-timing-function: cubic-bezier(0, 0.9, 0, 1);
+    transition: height 0.2s, visibility 0.2s;
+    transition-timing-function: cubic-bezier(0, 1.12, 0, 1.12);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 
@@ -75,7 +75,7 @@ ms-dropdown {
 .dropdown-container::-webkit-scrollbar-thumb {
     background-color: var(--color-lightL);
     border-radius: 4px;
-    border: 2px solid var(--color-darkL);
+    border: 2px solid var(--color-normal);
 }
 
 .dropdown-container.open {
@@ -93,5 +93,5 @@ ms-dropdown {
 }
 
 .dropdown-container .selected {
-    background-color: var(--color-normal);
+    background-color: var(--color-normalL);
 }
diff --git a/app/css/FileSelector.css b/app/css/FileSelector.css
@@ -6,7 +6,7 @@ ms-fileselector {
 .fileselector-input {
     box-sizing: border-box;
     border-radius: 4px 0 0 4px;
-    border: 1px solid var(--color-dark);
+    border: 1px solid var(--color-darkL);
     padding: 8px;
     background-color: var(--color-normalD);
     color: var(--color-white);
@@ -17,7 +17,7 @@ ms-fileselector {
 }
 
 .fileselector-input:focus {
-    border: 1px solid var(--color-light);
+    border: 1px solid var(--color-black);
 }
 
 .fileselector-input::placeholder {
@@ -29,7 +29,7 @@ ms-fileselector {
     background-color: transparent;
     outline: none;
     border-style: solid;
-    border-color: var(--color-dark);
+    border-color: var(--color-darkL);
     border-width: 1px 1px 1px 0;
     border-radius: 0 4px 4px 0;
     padding: 6px 10px 6px 10px;

diff --git a/app/css/KeyRecorder.css b/app/css/KeyRecorder.css
@@ -1,15 +1,13 @@
 ms-keyrecorder {
     display: block;
-    border: 1px solid/*var(--color-dark)*/
-    var(--color-dark);
+    border: 1px solid var(--color-darkL);
     border-radius: 4px;
     padding: 4px;
     background-color: var(--color-normalD);
     color: var(--color-gray);
     outline: none;
     transition: 0.2s all;
     font-size: 13px;
-    /*box-shadow: inset 0 0 4px var(--color-dark);*/
 }
 
 ms-keyrecorder:hover {
@@ -35,9 +33,9 @@ ms-keyrecorder:hover>.keyrecorder-indicator {
     padding: 5.5px;
     border-radius: 9.5px;
     margin: 6px;
-    transition: all 0.2s;
+    transition: all 0.15s;
     color: var(--color-white);
-    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition-timing-function: cubic-bezier(0.07, 0.91, 0.1, 1.19);
     text-transform: uppercase;
 }
 
@@ -75,7 +73,7 @@ ms-keyrecorder .key {
     background-color: var(--color-normalL);
     padding: 3px 4px 6px;
     vertical-align: middle;
-    border: 1px solid var(--color-dark);
+    border: 1px solid var(--color-darkL);
     border-radius: 2px;
     color: var(--color-white);
     box-shadow: inset 0 -4px 0 var(--color-darkL);

diff --git a/app/css/Modal.css b/app/css/Modal.css
@@ -33,9 +33,9 @@
     background-color: var(--color-normal);
     border-radius: 4px;
     box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.16);
-    transition: transform 0.2s, opacity 0.2s;
+    transition: transform 0.15s, opacity 0.15s;
     position: absolute;
-    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+    transition-timing-function: cubic-bezier(0.13, 0.93, 0.18, 1.26);
     max-height: calc(100% - 64px);
     margin-top: 32px;
     max-width: 600px;

diff --git a/app/css/Slider.css b/app/css/Slider.css
@@ -44,8 +44,8 @@ ms-slider {
     padding: 6px;
     box-sizing: border-box;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
-    transition: opacity 0.1s, top 0.1s, transform 0.1s;
-    transition-timing-function: cubic-bezier(0.18, 0.89, 0.47, 1.4);
+    transition: opacity 0.15s, top 0.15s, transform 0.15s;
+    transition-timing-function: cubic-bezier(0.15, 1.14, 0.16, 1.24);
     height: fit-content;
 }
 

diff --git a/app/css/SoundSearch.css b/app/css/SoundSearch.css
@@ -11,8 +11,8 @@
     vertical-align: top;
     width: 0;
     box-sizing: content-box;
-    transition: all 0.3s;
-    transition-timing-function: cubic-bezier(0, 1, 0, 1);
+    transition: all 0.2s;
+    transition-timing-function: cubic-bezier(0, 1.12, 0, 1.12);
 }
 
 #soundlist-searchbox.open {

diff --git a/app/css/TextField.css b/app/css/TextField.css
@@ -5,20 +5,18 @@ ms-textfield {
 .textInput-default {
     box-sizing: border-box;
     width: 100%;
-    border: 1px solid/*var(--color-dark)*/
-    var(--color-dark);
+    border: 1px solid var(--color-darkL);
     border-radius: 4px;
     padding: 8px;
     background-color: var(--color-normalD);
     color: var(--color-white);
     outline: none;
     font-size: 13px;
     transition: border 0.2s;
-    /*box-shadow: inset 0 0 1px var(--color-dark);*/
 }
 
 .textInput-default:focus {
-    border: 1px solid var(--color-light);
+    border: 1px solid var(--color-black);
 }
 
 .textInput-default::placeholder {
@@ -31,23 +29,20 @@ ms-textfield {
 
 @keyframes warn {
     0% {
-        border-color: var(--color-dark);
-        box-shadow: inset 0 0 4px var(--color-dark);
+        border-color: var(--color-darkL);
     }
     25% {
         border-color: var(--color-red);
         box-shadow: inset 0 0 4px var(--color-red);
     }
     50% {
-        border-color: var(--color-dark);
-        box-shadow: inset 0 0 4px var(--color-dark);
+        border-color: var(--color-darkL);
     }
     75% {
         border-color: var(--color-red);
         box-shadow: inset 0 0 4px var(--color-red);
     }
     100% {
-        border-color: var(--color-dark);
-        box-shadow: inset 0 0 4px var(--color-dark);
+        border-color: var(--color-darkL);
     }
 }
diff --git a/app/css/Toggler.css b/app/css/Toggler.css
@@ -12,8 +12,8 @@ ms-checkbox:hover .toggler-box:not(.toggled) {
 }
 
 .toggler-box {
-    background-color: var(--color-darkL);
-    border: 1px solid var(--color-dark);
+    background-color: var(--color-normalD);
+    border: 1px solid var(--color-darkL);
     border-radius: 8px;
     display: inline-block;
     width: 24px;

diff --git a/app/css/main.css b/app/css/main.css
@@ -22,8 +22,9 @@
 }
 
 :root {
-    --color-dark: #15151a;
-    --color-darkL: #1a1a1f;
+    --color-black: #0e0e11;
+    --color-dark:  #121217;
+    --color-darkL: #17171c;
     --color-normalD: #1c1c21;
     --color-normal: #1f1f24;
     --color-normalL: #25252b;
@@ -58,7 +59,7 @@ button {
     color: var(--color-white);
     border-radius: 4px;
     outline: none;
-    transition: background-color 0.2s;
+    transition: background-color 0.1s;
 }
 
 button span {
@@ -130,7 +131,7 @@ button:active {
 .icon-text-button .icon {
     font-family: 'MSIcons';
     font-size: 18px;
-    margin-right: 8px;
+    margin-right: 3px;
     display: inline-block;
     vertical-align: middle;
 }
@@ -278,23 +279,23 @@ button:active {
 
 @keyframes warn {
     0% {
-        border-color: var(--color-dark);
+        border-color: var(--color-darkL);
         box-shadow: none
     }
     25% {
         border-color: var(--color-red);
         box-shadow: inset 0 0 4px var(--color-red);
     }
     50% {
-        border-color: var(--color-dark);
+        border-color: var(--color-darkL);
         box-shadow: none
     }
     75% {
         border-color: var(--color-red);
         box-shadow: inset 0 0 4px var(--color-red);
     }
     100% {
-        border-color: var(--color-dark);
+        border-color: var(--color-darkL);
         box-shadow: none
     }
 }

diff --git a/app/elements/Dropdown.js b/app/elements/Dropdown.js
@@ -96,7 +96,7 @@ module.exports = class Dropdown extends HTMLElement {
         this.container.removeChild(this.container.childNodes.item(index))
     }
 
-    switch () {
+    switch() {
         if (this.isOpen) this.close()
         else this.open()
     }
@@ -110,7 +110,7 @@ module.exports = class Dropdown extends HTMLElement {
         let max = document.documentElement.clientHeight - this.main.getBoundingClientRect().bottom
         let min = totalHeight + 2
 
-        //Saber se é preciso uma scrollbar
+        // Calculate if a scrollbar is necessary
         if (min > max) {
             this.container.style.height = max + "px"
             this.container.style.overflowY = "auto"

diff --git a/app/elements/FileSelector.js b/app/elements/FileSelector.js
@@ -33,7 +33,8 @@ class FileSelector extends HTMLElement {
     }
 
     get path() {
-        return this.value
+        if (!this.input) return this.value
+        return this.input.value
     }
 
     set path(value) {

diff --git a/app/elements/Slider.js b/app/elements/Slider.js
@@ -2,7 +2,7 @@ module.exports = class Slider extends HTMLElement {
     constructor() {
         super()
         this.progressColor = "var(--color-white)"
-        this.maincolor = "var(--color-dark)"
+        this.maincolor = "var(--color-darkL)"
     }
 
     connectedCallback() {

diff --git a/app/elements/SoundList.js b/app/elements/SoundList.js
@@ -100,6 +100,10 @@ module.exports = class SoundList extends HTMLElement {
             }
         })
 
+        item.addEventListener('auxclick', (e) => {
+            if (e.button === 1) MS.stopSound(sound)
+        })
+
         playingIndicator.addEventListener('click', () => {
             MS.stopSound(sound)
         })
@@ -118,6 +122,7 @@ module.exports = class SoundList extends HTMLElement {
             })
             modal.addEventListener('remove', (e) => {
                 item.remove()
+                MS.stopSound(this.sound)
                 if (this.items.childElementCount < 1) this._displayNoSoundsMessage(NO_SOUNDS)
                 KeybindManager.unregisterSound(sound)
                 MS.getSelectedSoundboard().removeSound(sound)

diff --git a/app/elements/SoundboardList.js b/app/elements/SoundboardList.js
@@ -50,6 +50,7 @@ module.exports = class SoundboardList extends HTMLElement {
         const title = document.createElement('span')
         title.classList.add('title')
         title.innerHTML = soundboard.name
+        item.titleElement = title
 
         const desc = document.createElement('span')
         if (soundboard.keys) desc.innerHTML = Keys.toKeyString(soundboard.keys)
@@ -150,20 +151,22 @@ module.exports = class SoundboardList extends HTMLElement {
     _setAllPlayingIndicators(state) {
         for (let i = 0; i < this.childElementCount; i++) {
             const elem = this.childNodes[i]
-            elem.playingSounds = null
-            this._setPlayingIndicatorState(elem, state)
+            if (elem !== this.dragDummy) {
+                elem.playingSounds = null
+                this._setPlayingIndicatorState(elem, state)
+            }
         }
     }
 
     /**
      * Sets the current playing indicator state for an element of the list.
      */
     _setPlayingIndicatorState(element, state) {
-        if (!element.indicator) return
+        if (!element.titleElement) return
         if (state) {
-            element.indicator.style.fontWeight = '1000'
+            element.titleElement.style.fontWeight = '1000'
         } else {
-            element.indicator.style.fontWeight = null
+            element.titleElement.style.fontWeight = null
         }
     }
 

diff --git a/app/elements/TextField.js b/app/elements/TextField.js
@@ -16,7 +16,8 @@ module.exports = class TextField extends HTMLElement {
     }
 
     get text() {
-        return this.value
+        if (!this.input) return this.value
+        return this.input.value
     }
 
     set text(value) {

diff --git a/app/elements/modals/SoundModal.js b/app/elements/modals/SoundModal.js
@@ -4,6 +4,7 @@ const TextField = require('../TextField.js')
 const FileSelector = require('../FileSelector.js')
 const KeyRecorder = require('../KeyRecorder.js')
 const Sound = require('../../models/Sound.js')
+const MS = require('../../models/MS.js')
 
 const Mode = {
     ADD: 'add',
@@ -72,7 +73,9 @@ class SoundModal extends Modal {
         ]
 
         if (this.mode == Mode.EDIT) {
-            buttons.unshift(Modal.getButton("remove", () => { this.removeSound() }, true, true))
+            buttons.unshift(Modal.getButton("remove", () => {
+                this.removeSound()
+            }, true, true))
         }
 
         return buttons