Merge pull request #198 from ocsigen/tongue

Add widget ot_tongue

Author: vouillon

CHANGES

@@ -1,3 +1,7 @@
+===== 2.7.0 (2020-04-29) =====
+
+* New widget: ot_tongue
+
 ===== 2.5.0 (2020-01-28) =====
 * ot_popup : Add parameter to toggle scroll hack
 * Compatibility with Js_of_ocaml 3.5

css/ot_tongue.css

@@ -0,0 +1,70 @@
+.ot-tongue {
+  position: fixed;
+  will-change: transform;
+  z-index: 1;
+  background-color: white;
+  box-shadow: 0 2px 9px 0 rgba(173, 173, 173, 0.5);
+  overflow: hidden;
+}
+.ot-tongue::after {
+  content: "";
+  position: absolute;
+  background-color: #eee;
+  border-radius: 2px;
+  z-index: 1;
+}
+.ot-tongue-left {
+  height: 100%;
+  padding-right: 70px;
+  border-radius: 0 5px 5px 0;
+  top: 0;
+  right: 100%;
+}
+.ot-tongue-left::after {
+  right: 4px;
+  width: 4px;
+  top: calc(50% - 10px);
+  height: 20px;
+}
+.ot-tongue-right {
+  height: 100%;
+  padding-left: 70px;
+  border-radius: 5px 0 0 5px;
+  top: 0;
+  left: 100%;
+}
+.ot-tongue-right::after {
+  left: 4px;
+  width: 4px;
+  top: calc(50% - 10px);
+  height: 20px;
+}
+.ot-tongue-top {
+  width: 100%;
+  padding-bottom: 70px;
+  border-radius: 0 0 5px 5px;
+  bottom: 100%;
+  left: 0;
+}
+.ot-tongue-top::after {
+  bottom: 4px;
+  height: 4px;
+  left: calc(50% - 10px);
+  width: 20px;
+}
+.ot-tongue-bottom {
+  width: 100%;
+  padding-top: 70px;
+  border-radius: 5px 5px 0 0;
+  top: 100%;
+  left: 0;
+}
+.ot-tongue-bottom::after {
+  top: 4px;
+  height: 4px;
+  left: calc(50% - 10px);
+  width: 20px;
+}
+.ot-tongue:not(.notransition) {
+  transition: transform 0.4s cubic-bezier(0.1, 1, 0.8, 1);
+}

ocsigen-toolkit.install

@@ -11,4 +11,5 @@ share: [
   "css/ot_page_transition.css"  {"css/ot_page_transition.css"}
   "css/ot_color_picker.css"     {"css/ot_color_picker.css"}
   "css/ot_pull_to_refresh.css"  {"css/ot_pull_to_refresh.css"}
+  "css/ot_tongue.css"           {"css/ot_tongue.css"}
 ]

opam

@@ -1,6 +1,6 @@
 opam-version: "2.0"
 name: "ocsigen-toolkit"
-version: "2.6.0"
+version: "2.7.0"
 maintainer: "dev@ocsigen.org"
 synopsis: "Reusable UI components for Eliom applications (client only, or client-server)"
 description: "The Ocsigen Toolkit is a set of user interface widgets that facilitate the development of Eliom applications."