Merge pull request #627 from Textualize/layer-dock

Adds Layers and Docks
Textualize · Aug 2, 2022 · 7d2b6ac · 7d2b6ac
2 parents 6be8fb3 + 52199ab
commit 7d2b6ac
Show file tree

Hide file tree

Showing 42 changed files with 811 additions and 927 deletions.
diff --git a/e2e_tests/sandbox_basic_test.py b/e2e_tests/sandbox_basic_test.py
@@ -14,15 +14,15 @@
 if len(sys.argv) > 2:
     script_time_to_live = float(sys.argv[2])
 
-e2e_root = Path(__file__).parent
+e2e_root = Path(__file__).parent / "test_apps"
 
 completed_process = None
 
 
 def launch_sandbox_script(python_file_name: str) -> None:
     global completed_process
 
-    command = f"{sys.executable} ./test_apps/{shlex.quote(python_file_name)}.py"
+    command = f"{sys.executable} {shlex.quote(python_file_name)}.py"
     print(f"Launching command '{command}'...")
     try:
         completed_process = subprocess.run(

diff --git a/e2e_tests/test_apps/basic.css b/e2e_tests/test_apps/basic.css
@@ -2,100 +2,114 @@
 
 
 
-* {
+ * {
     transition: color 300ms linear, background 300ms linear;
-}
+} 
+
 
+*:hover {
+  /* tint: 30% red;  
+  /* outline: heavy red; */
+}
 
 App > Screen {
-  layout: dock;
-  docks: side=left/1;
+
   background: $surface;
-  color: $text-surface;
+  color: $text-surface; 
+  layers: sidebar;
+
+  color: $text-background;
+  background: $background;
+  layout: vertical;
+
 }
 
+DataTable {
+  /*border:heavy red;*/
+  /* tint: 10% green; */
+  /* opacity: 50%; */
+  padding: 1;
+  margin: 1 2;  
+  height: 12;  
+}
 
 #sidebar {
-  color: $text-primary;
-  background: $primary;
-  dock: side;
+  color: $text-panel;
+  background: $panel;
+  dock: left;
   width: 30;
   offset-x: -100%;
-  layout: dock;
+
   transition: offset 500ms in_out_cubic;
+  layer: sidebar;
 }
 
 #sidebar.-active {
   offset-x: 0;
 }
 
 #sidebar .title {
-  height: 3;
-  background: $primary-darken-2;
-  color: $text-primary-darken-2 ;
-  border-right: outer $primary-darken-3;
+  height: 1;
+  background: $primary-background-darken-1;
+  color: $text-primary-background-darken-1;
+  border-right: wide $background;
   content-align: center middle;
 }
 
 #sidebar .user {
   height: 8;
-  background: $primary-darken-1;
-  color: $text-primary-darken-1;
-  border-right: outer $primary-darken-3;
+  background: $panel-darken-1;
+  color: $text-panel-darken-1;
+  border-right: wide $background;
   content-align: center middle;
 }
 
 #sidebar .content {
-  background: $primary;
-  color: $text-primary;
-  border-right: outer $primary-darken-3;
+  background: $panel-darken-2;
+  color: $text-surface;
+  border-right: wide $background;
   content-align: center middle;
 }
 
 #header {
-  color: $text-primary-darken-1;
-  background: $primary-darken-1;
-  height: 3;
+  color: $text-secondary-background;
+  background: $secondary-background;
+  height: 1;
   content-align: center middle;
-}
-
-#content {
-  color: $text-background;
-  background: $background;
-  layout: vertical;
-  overflow-y: scroll;  
+
+  dock: top;
 }
 
 
 Tweet {
-  height: 12;
-  width: 80;
+  height:12;
+  width: 100%;
 
-  margin: 1 3;
+
   background: $panel;
   color: $text-panel;
   layout: vertical;
   /* border: outer $primary; */
   padding: 1;
-  border: wide $panel-darken-2;
-  overflow-y: scroll; 
+  border: wide $panel;
+  overflow: auto;
+  /* scrollbar-gutter: stable; */
   align-horizontal: center;
-
+  box-sizing: border-box;
 }
 
+
 .scrollable {
-  width: 80;
+
   overflow-y: scroll;
-  max-width:80;
+  margin: 1 2;
   height: 20;
   align-horizontal: center;
   layout: vertical;
 }
 
-.code {
-
-  height: 34;
-  width: 100%;
+.code {  
+  height: auto;
 
 }
 
@@ -110,9 +124,12 @@ TweetBody {
   width: 100%;
   background: $panel;
   color: $text-panel;
-  height:20;
-  padding: 0 1 0 0;
-
+  height: auto; 
+  padding: 0 1 0 0; 
+}
+
+Tweet.scroll-horizontal TweetBody {
+  width: 350;
 }
 
 .button {
@@ -123,11 +140,11 @@ TweetBody {
   /* border-top: hidden  $accent-darken-3;  */
   border: tall $accent-darken-2;
   /* border-left: tall $accent-darken-1; */
- 
+
 
   /* padding: 1 0 0 0 ; */
 
-  transition: background 200ms in_out_cubic, color 300ms in_out_cubic;
+  transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
 
 }
 
@@ -138,18 +155,19 @@ TweetBody {
   height: 3;
   border: tall $accent-darken-1;
   /* border-left: tall $accent-darken-3; */
-
 
 
-
+
+
 }
 
 #footer {
   color: $text-accent;
   background: $accent;
   height: 1;
-  border-top: hkey $accent-darken-2;
+
   content-align: center middle;
+  dock:bottom;
 }
 
 
@@ -159,58 +177,60 @@ TweetBody {
 
 OptionItem {
   height: 3;
-  background: $primary;
-  transition: background 100ms linear;
-  border-right: outer $primary-darken-2;
-  border-left: hidden;
+  background: $panel;
+  border-right: wide $background;
+  border-left: blank;
   content-align: center middle;
 }
 
 OptionItem:hover {
   height: 3;
-  color: $accent;
+  color: $text-primary;
   background: $primary-darken-1;
   /* border-top: hkey $accent2-darken-3;
   border-bottom: hkey $accent2-darken-3; */
   text-style: bold;
-  border-left: outer $accent-darken-2;
+  border-left: outer $secondary-darken-2;
 }
 
 Error {
-  width: 80;
+  width: 100%;
   height:3;
   background: $error;
   color: $text-error;
-  border-top: hkey $error-darken-2;
-  border-bottom: hkey $error-darken-2; 
-  margin: 1 3;
+  border-top: tall $error-darken-2;
+  border-bottom: tall $error-darken-2;
 
+  padding: 0;
   text-style: bold;
-  align-horizontal: center;   
+  align-horizontal: center;
 }
 
 Warning {
-  width: 80;
+  width: 100%;
   height:3;
   background: $warning;
   color: $text-warning-fade-1;
-  border-top: hkey $warning-darken-2;
-  border-bottom: hkey $warning-darken-2; 
-  margin: 1 2;
+  border-top: tall $warning-darken-2;
+  border-bottom: tall $warning-darken-2;
+
   text-style: bold;
   align-horizontal: center;
 }
 
 Success {
-  width: 80;
-  height:3;  
+  width: 100%;
+
+  height:auto;  
   box-sizing: border-box;
-  background: $success-lighten-3;
-  color: $text-success-lighten-3-fade-1;
-  border-top: hkey $success;
-  border-bottom: hkey $success; 
-  margin: 1 2;
-  text-style: bold;
+  background: $success;
+  color: $text-success-fade-1;  
+
+  border-top: hkey $success-darken-2;
+  border-bottom: hkey $success-darken-2; 
+
+  text-style: bold ;
+
   align-horizontal: center;
 }