Merge pull request #6250 from penpot/alotor-bug-colorpicker

🐛 Fix colorpicker scroll when dropdown displayed

CHANGES.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 2.6.1
+
+### :bug: Bugs fixed
+
+- Fix webhooks not shown in list [Taiga #10763](https://tree.taiga.io/project/penpot/issue/10763)
+- Fix colorpicker scroll when dropdown displayed [Taiga #10696](https://tree.taiga.io/project/penpot/issue/10696)
+
 ## 2.6.0
 
 ### :rocket: Epics and highlights

docker/images/docker-compose.yaml

@@ -87,7 +87,7 @@ services:
     networks:
       - penpot
 
-    labels:
+    # labels:
       # - "traefik.enable=true"
 
       # ## HTTPS: example of labels for the case where penpot will be exposed to the

docs/technical-guide/getting-started/docker.md

@@ -151,9 +151,20 @@ Postgres database and another one for the assets uploaded by your users (images
 clips). There may be more volumes if you enable other features, as explained in the file
 itself.
 
-## Configure the proxy
+## Configure the proxy and HTTPS
 
-Your host configuration needs to make a proxy to http://localhost:9001.
+We strongly recommend to use Penpot under HTTPS/SSL, which will require specific server configurations for DNS and SSL certificates.
+Besides, your host configuration needs to make a proxy to http://localhost:9001.
+
+<p class="advice">
+    If you plan to serve Penpot under different domain than `localhost` without HTTPS,
+    you need to disable the `secure` flag on cookies, with the `disable-secure-session-cookies` flag.
+    This is a configuration NOT recommended for production environments; as some browser APIs do
+    not work properly under non-https environments, this unsecure configuration
+    may limit the usage of Penpot; as an example, the clipboard does not work with HTTP.
+</p>
+
+Below, you can see three examples with three different proxys:
 
 ### Example with NGINX
 

frontend/src/app/main/data/team.cljs

@@ -199,7 +199,7 @@
   (ptk/reify ::webhooks-fetched
     ptk/UpdateEvent
     (update [_ state]
-      (update-in state [:team-id team-id] assoc :webhooks webhooks))))
+      (update-in state [:teams team-id] assoc :webhooks webhooks))))
 
 (defn fetch-webhooks
   []

frontend/src/app/main/ui/components/select.cljs

@@ -23,7 +23,7 @@
     [item item item]))
 
 (mf/defc select
-  [{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
+  [{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled data-direction]}]
   (let [label-index    (mf/with-memo [options]
                          (into {} (map as-key-value) options))
 
@@ -112,7 +112,7 @@
        [:span {:class (stl/css :current-label)} current-label]
        [:span {:class (stl/css :dropdown-button)} i/arrow]
        [:& dropdown {:show is-open? :on-close close-dropdown}
-        [:ul {:ref dropdown-element* :data-direction @dropdown-direction*
+        [:ul {:ref dropdown-element* :data-direction (or data-direction @dropdown-direction*)
               :class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
          (for [[index item] (d/enumerate options)]
            (if (= :separator item)

frontend/src/app/main/ui/dashboard/team.cljs

@@ -1045,7 +1045,7 @@
              (tr "dashboard.your-penpot")
              (:name team)))))
 
-    (mf/with-effect [team]
+    (mf/with-effect []
       (st/emit! (dtm/fetch-webhooks)))
 
     [:*

frontend/src/app/main/ui/workspace/colorpicker.scss

@@ -20,7 +20,7 @@
 
 .colorpicker {
   border-radius: $br-8;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .colorpicker-tabs {

frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs

@@ -124,6 +124,7 @@
      [:div {:class (stl/css :select-wrapper)}
       [:& select
        {:class (stl/css :shadow-type-select)
+        :data-direction "up"
         :default-value (or (d/name selected) "recent")
         :options options
         :on-change on-library-change}]]