Merge pull request #54 from calcit-lang/hover-effects

trying some tricky hover effects on the tree

.github/workflows/npm-publish.yaml

@@ -22,15 +22,15 @@ jobs:
 
       - uses: supplypike/setup-bin@v3
         with:
-          uri: 'https://github.com/calcit-lang/calcit/releases/download/0.8.4/cr'
+          uri: 'https://github.com/calcit-lang/calcit/releases/download/0.8.6/cr'
           name: 'cr'
-          version: '0.8.4'
+          version: '0.8.6'
 
       - uses: supplypike/setup-bin@v3
         with:
-          uri: 'https://github.com/calcit-lang/calcit/releases/download/0.8.4/caps'
+          uri: 'https://github.com/calcit-lang/calcit/releases/download/0.8.6/caps'
           name: 'caps'
-          version: '0.8.4'
+          version: '0.8.6'
 
       - run: caps --ci && yarn && yarn compile-server && yarn compile-page && yarn release-page
 

.github/workflows/upload.yaml

@@ -19,15 +19,15 @@ jobs:
 
     - uses: supplypike/setup-bin@v3
       with:
-        uri: 'https://github.com/calcit-lang/calcit/releases/download/0.8.4/cr'
+        uri: 'https://github.com/calcit-lang/calcit/releases/download/0.8.6/cr'
         name: 'cr'
-        version: '0.8.4'
+        version: '0.8.6'
 
     - uses: supplypike/setup-bin@v3
       with:
-        uri: 'https://github.com/calcit-lang/calcit/releases/download/0.8.4/caps'
+        uri: 'https://github.com/calcit-lang/calcit/releases/download/0.8.6/caps'
         name: 'caps'
-        version: '0.8.4'
+        version: '0.8.6'
 
     - run: caps --ci && yarn && yarn compile-server && yarn compile-page && yarn release-page
 

.npmignore

@@ -1,5 +1,5 @@
 
-/entry/
+/assets/
 /example
 /node_modules
 /src

entry/main.css → assets/main.css

@@ -63,5 +63,46 @@ body * {
 }
 
 .copy-commands:active {
-  background-color: hsla(0,0%,100%,0.3)
-}
+  background-color: hsla(0,0%,100%,0.3);
+}
+
+.comp-leaf {
+  opacity: 0.8;
+}
+.comp-leaf:hover {
+  background-color: hsla(0,0%,100%,0.14);
+}
+
+.comp-leaf:active {
+  transition-duration: 0ms;
+  /*  transform: scale(1.02);*/
+  transform: translate(1px, 0px);
+}
+
+.comp-expr:hover {
+  border-color: hsla(0,0%,100%,0.8);
+}
+
+.comp-expr:active {
+  transition-duration: 0ms;
+  /*  transform: scale(1.02);*/
+  transform: translate(1px, 0px);
+}
+
+/** tricky selector to reset parent hover color */
+div.comp-expr:has(.comp-expr:hover):hover,
+div.comp-expr:has(.comp-leaf:hover):hover {
+  border-color: hsl(200,100%,76%,0.5);
+}
+
+
+/** tricky selector to reset parent click color */
+div.comp-expr:has(.comp-expr:active):active,
+div.comp-expr:has(.comp-leaf:active):active {
+  transform: translate(0px, 0px);
+}
+
+.comp-expr.cirru-focused .comp-leaf,
+.comp-leaf.cirru-focused {
+  opacity: 1;
+}

compact.cirru

@@ -843,7 +843,7 @@
                   sorted-children $ -> (:data expr) (.to-list) (.sort-by first)
                 list->
                   {} (:tab-index 0)
-                    :class-name $ str-spaced (base-style-expr theme) (if focused? |cirru-focused |)
+                    :class-name $ str-spaced "\"comp-expr" (base-style-expr theme) (if focused? |cirru-focused |)
                     :style $ decide-expr-theme expr (includes? others coord) focused? focus-in? tail? layout-mode (count coord) depth theme
                     :on $ if readonly?
                       {} $ :click
@@ -1118,7 +1118,7 @@
                     , "\""
                   focused? $ = focus coord
                 textarea $ {} (:value text) (:spellcheck false)
-                  :class-name $ str-spaced (base-style-leaf theme)
+                  :class-name $ str-spaced "\"comp-leaf" (base-style-leaf theme)
                     if (= focus coord) "\"cirru-focused" "\""
                   :read-only readonly?
                   :style $ decide-leaf-theme text focused? first? by-other? theme
@@ -3194,7 +3194,7 @@
         |css-expr $ %{} :CodeEntry (:doc |)
           :code $ quote
             defstyle css-expr $ {}
-              "\"$0" $ {} (:border-width "|0 0 0px 1px") (:border-style :solid) (:min-height 24) (:outline :none) (:padding-left 10) (:font-family |Menlo,monospace) (:font-size 13) (:margin-bottom 2) (:margin-right 1) (:margin-left 8) (:line-height "\"1em") (:border-radius "\"8px")
+              "\"$0" $ {} (:border-width "|0 0 0px 1px") (:border-style :solid) (:min-height 24) (:outline :none) (:padding-left 10) (:font-family |Menlo,monospace) (:font-size 13) (:margin-bottom 2) (:margin-right 1) (:margin-left 8) (:line-height "\"1em") (:border-radius "\"8px") (:transition-duration "\"200ms") (:transition-property "\"background,opacity,border-color")
                 :border-color $ hsl 200 100 76 0.5
         |css-leaf $ %{} :CodeEntry (:doc |)
           :code $ quote
@@ -3260,7 +3260,7 @@
               :background-color $ hsl 0 0 100 0.2
         |style-leaf $ %{} :CodeEntry (:doc |)
           :code $ quote
-            def style-leaf $ {} (:line-height |24px) (:height 24) (:margin "|1px 1px") (:padding "|0px 4px") (:background-color :transparent) (:min-width 8) (:font-family ui/font-code) (:font-size 14) (:vertical-align :baseline) (:text-align :left) (:border-width "|1px 1px 1px 1px") (:resize :none) (:white-space :nowrap) (:outline :none) (:border :none) (:border-radius "\"6px")
+            def style-leaf $ {} (:line-height |24px) (:height 24) (:margin "|1px 1px") (:padding "|0px 4px") (:background-color :transparent) (:min-width 8) (:font-family ui/font-code) (:font-size 14) (:vertical-align :baseline) (:text-align :left) (:border-width "|1px 1px 1px 1px") (:resize :none) (:white-space :nowrap) (:outline :none) (:border :none) (:border-radius "\"6px") (:transition-duration "\"100ms") (:transition-property "\"background,opacity,border-color")
               :color $ hsl 200 14 60
         |style-number $ %{} :CodeEntry (:doc |)
           :code $ quote

index.html

@@ -13,7 +13,7 @@
     }
   </style>
   <link rel="stylesheet" type="text/css" href="//cdn.tiye.me/favored-fonts/main-fonts.css">
-  <link rel="stylesheet" type="text/css" href="./entry/main.css">
+  <link rel="stylesheet" type="text/css" href="./assets/main.css">
 
 </head>
 

package.json

@@ -25,7 +25,7 @@
     "vite": "^4.4.11"
   },
   "dependencies": {
-    "@calcit/procs": "^0.8.4",
+    "@calcit/procs": "^0.8.6",
     "chalk": "^5.3.0",
     "dayjs": "^1.11.10",
     "gaze": "^1.1.3",