Continued work on browser panel

vizia · Dec 26, 2023 · 4632cb9 · 4632cb9
1 parent 4bb7565
commit 4632cb9
Show file tree

Hide file tree

Showing 18 changed files with 396 additions and 205 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -4,8 +4,8 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-vizia = {git = "https://github.com/vizia/vizia"}
-# vizia = {path = "../vizia"}
+# vizia = {git = "https://github.com/vizia/vizia", branch = "views-update"}
+vizia = {path = "../vizia"}
 rusqlite = { version = "0.29.0", features = ["bundled", "chrono"] }
 chrono = { version = "0.4.26", features = ["serde"]}
 serde = { version = "1.0.177", features = ["derive"] }
@@ -17,4 +17,4 @@ itertools = "0.11.0"
 fuzzy-matcher = "0.3.7"
 
 [profile.dev.package."*"]
-opt-level = 3
+opt-level = 3
diff --git a/resources/themes/style.css b/resources/themes/style.css
@@ -6,8 +6,17 @@
     color: #fff;
 } */
 
+/*
+col-0: #000000;
+col-1: #181818;
+col-2: #2a2a2a;
+col-3: #323232;
+col-4: #484848;
+col-5: #8c8c8c;
+*/
+
 :root {
-    background-color: #181818;
+    background-color: #2a2a2a;
 }
 
 .panel-icon {
@@ -53,8 +62,10 @@ resizable-stack.browser {
 }
 
 browser-panel {
+    background-color: #181818;
     size: 1s;
     row-between: 8px;
+    child-space: 8px;
 }
 
 browser-panel > .header {
@@ -70,6 +81,26 @@ browser-panel > .footer {
     child-right: 1s;
 }
 
+tags-panel {
+    background-color: #181818;
+    size: 1s;
+    row-between: 8px;
+    child-space: 8px;
+}
+
+tags-panel > .header {
+    height: 28px;
+    width: 1s;
+    col-between: 1s;
+}
+
+tags-panel > .footer {
+    height: auto;
+    width: 1s;
+    child-left: 1s;
+    child-right: 1s;
+}
+
 .searchbar {
     max-height: 0px;
     transition: max-height 100ms;
@@ -85,11 +116,11 @@ browser-panel > .footer {
 }
 
 textbox.search {
-    background-color: #484848;
+    background-color: #000000;
 }
 
 textbox.search:checked {
-    background-color: #484848;
+    background-color: #000000;
 }
 
 textbox.search .placeholder {
@@ -114,6 +145,10 @@ toggle-button {
     cursor: hand;
 }
 
+toggle-button > icon.inner {
+    size: auto;
+}
+
 toggle-button:checked {
     background-color: #336bcc;
     color: white;
@@ -158,14 +193,15 @@ button.menu-button {
 }
 
 .footer > label {
-    background-color: #282828;
-    border-radius: 4px;
-    child-top: 4px;
-    child-bottom: 4px;
     child-left: 8px;
     child-right: 8px;
 }
 
+wave-panel .footer > label {
+    background-color: #181818;
+    color: #a8a8a8;
+}
+
 directory-item > label {
     height: 20px;
     /* border: 1px blue; */
@@ -181,7 +217,7 @@ directory-item {
 }
 
 directory-item:hover {
-    background-color: #3d3d3d;
+    background-color: #2a2a2a;
 }
 
 directory-item.selected {
@@ -258,18 +294,55 @@ directory-item.search-match .dir-name {
 
 .panel {
     size: 1s;
-    background-color: #323232;
+    background-color: #181818;
     child-space: 8px;
     row-between: 8px;
 }
 
 samples-panel {
     size: 1s;
-    background-color: #323232;
+    background-color: #1f1f1f;
+    child-space: 8px;
+    row-between: 8px;
+    overflow: hidden;
+}
+
+samples-panel .header {
+    height: 24px;
+}
+
+samples-panel .footer {
+    height: 22px;
+}
+
+wave-panel {
+    size: 1s;
+    background-color: #1f1f1f;
     child-space: 8px;
     row-between: 8px;
 }
 
+wave-panel > .header {
+    height: 28px;
+    width: 1s;
+    col-between: 8px;
+    child-top: 1s;
+    child-bottom: 1s;
+}
+
+wave-panel > .footer {
+    height: 28px;
+    width: 1s;
+    col-between: 8px;
+    child-top: 1s;
+    child-bottom: 1s;
+}
+
+wave-panel .waveform {
+    background-color: #181818;
+    border-radius: 4px;
+}
+
 .resize_handle {
     background-color: #484848;
     transition: background-color 100ms;
@@ -294,15 +367,15 @@ smart-table .handles:hover resize-handle {
     transition: opacity 100ms 200ms;
 }
 
-.resize_handle:over {
+/* .resize_handle:over {
     background-color: #336bcc;
     transition: background-color 100ms;
 }
 
 .resize_handle.drag_handle {
     background-color: #90b7f9;
     transition: background-color 100ms;
-}
+} */
 
 scrollview > scroll_content {
     width: 1s;
@@ -311,7 +384,7 @@ scrollview > scroll_content {
     transition: right 100ms;
 }
 
-scrollview:checked > scroll_content {
+scrollview.vertical > scroll_content {
     right: 16px;
     transition: right 100ms;
 }
@@ -321,54 +394,65 @@ scrollview scrollbar.vertical {
     transition: width 100ms;
 }
 
-scrollview:checked scrollbar.vertical {
+scrollview.vertical scrollbar.vertical {
     width: 8px;
     transition: width 100ms;
 }
 
 scrollbar {
-    background-color: #282828;
+    background-color: #121212;
     border-radius: 4px;
 }
 
 scrollbar .thumb {
-    background-color: #484848;
+    background-color: #323232;
     border-radius: 4px;
+    opacity: 1;
 }
 
 smart-table {
+    background-color: #2a2a2a;
     /* background-color: #323232;
     border-radius: 8px;
     height: auto;
     width: 1s; */
-    row-between: 4px;
+    row-between: 1px;
+    height: auto;
+}
+
+smart-table .row-list {
+    background-color: #2a2a2a;
 }
 
 smart-table .header {
-    border-radius: 4px;
-    background-color: #282828;
     height: 20px;
+    background-color: #1f1f1f;
 }
 
-label.column-heading {
+smart-table label.column-heading {
     child-space: 1s;
     width: 1s;
 }
 
 smart-table .row {
     child-top: 1s;
     child-bottom: 1s;
+    height: 26px;
     /* child-left: 8px;
     child-right: 8px; */
-    border-radius: 4px;
+    background-color: #252525;
 }
 
 smart-table .row.odd {
-    background-color: #ffffff0c;
+    background-color: #1f1f1f;
+}
+
+smart-table .row.even {
+    background-color: #252525;
 }
 
-smart-table-row.even {
-    background-color: #404040;
+smart-table .row-list {
+    row-between: 1px;
 }
 
 smart-table-row.header {

diff --git a/resources/translations/en-US/browser.ftl b/resources/translations/en-US/browser.ftl
@@ -1,3 +1,4 @@
 search = Search
 filter = Filter
-match-case = Match Case
+match-case = Match case
+toggle-search = Show/Hide search
diff --git a/resources/translations/es/browser.ftl b/resources/translations/es/browser.ftl
@@ -1,3 +1,4 @@
 search = Buscar
 filter = Filtrar
-match-case = Coincidir mayúsculas y minúsculas
+match-case = Coincidir mayúsculas y minúsculas
+toggle-search = Mostrar/Esconder la busca
diff --git a/src/app_data.rs b/src/app_data.rs
@@ -4,18 +4,23 @@ use vizia::prelude::*;
 
 use crate::{
     database::prelude::{AudioFile, CollectionID, Database, DatabaseAudioFileHandler},
-    state::browser::{BrowserState, Directory},
+    state::{
+        browser::{BrowserState, Directory},
+        TagsState,
+    },
 };
 
 #[derive(Lens)]
 pub struct AppData {
     pub database: Arc<Mutex<Database>>,
     pub browser: BrowserState,
+    pub tags: TagsState,
     pub browser_width: f32,
     pub table_height: f32,
     pub table_headers: Vec<String>,
     pub table_rows: Vec<AudioFile>,
     pub search_text: String,
+    pub selected_sample: Option<usize>,
 }
 
 pub enum AppEvent {
@@ -27,6 +32,7 @@ pub enum AppEvent {
 impl Model for AppData {
     fn event(&mut self, cx: &mut EventContext, event: &mut Event) {
         self.browser.event(cx, event);
+        self.tags.event(cx, event);
 
         event.map(|app_event, _| match app_event {
             AppEvent::SetBrowserWidth(width) => self.browser_width = *width,