grevlingui 0.1.43 → 0.1.44

package/NumberSelect/NumberSelect.css

@@ -3,8 +3,6 @@
 .numberSelect {
     position: relative;
     z-index: 2;
-
-
 }
 
 .swipeBlobContainer {
@@ -20,12 +18,41 @@
 }
 
 .swipeBlobContainer .swipeBlob {
-    background-color: hotpink;
+    /*background-color: hotpink;*/
     position: absolute;
     /*border-radius: 100%;*/
+    /*clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);*/
+    /*clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);*/
+    /*clip-path: polygon(15% 15%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%);*/
+    /*clip-path: polygon(15% 25%, 50% 0, 85% 25%, 100% 50%, 75% 85%, 50% 100%, 25% 85%, 0 50%);*/
+    clip-path: polygon(15% 20%, 50% 0, 85% 20%, 100% 50%, 80% 85%, 50% 100%, 20% 85%, 0 50%);
+}
+
+.plusMinus {
+    position: absolute;
+    left: 0;
+    right: 0;
+    text-align: center;
+    z-index: 3;
+    color: white;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /*background-color: hotpink!important;*/
+}
+
+.plusMinus svg {
+    margin: 0
+}
+
+.plusMinus.plus{
+    /*top: 0;*/
 }
 
-.numberSelect_editing {
+.plusMinus.minus{
+    /*bottom: 0;*/
 }
 
 .numberSelect_doneClosing {

package/NumberSelect/NumberSelect.js

@@ -153,10 +153,25 @@ const NumberSelect = _ref => {
   }, icon()));
   const gety = e => e.touches[0].clientY;
   const onTouchStart = e => {
-    if (noFlick || editing) return;
+    if (noFlick) return;
     setTouchStartPosition(gety(e));
   };
-  const onTouchMove = e => !noFlick && !editing && setVerticalDistanceSwiped(touchStartPosition - gety(e));
+  const onTouchMove = e => {
+    if (noFlick) return;
+    const newVal = touchStartPosition - gety(e);
+    const bottom = min === value && !invert || max === value && invert;
+    const top = max === value && !invert || min === value && invert;
+    if (bottom && newVal < 0 || top && newVal > 0) {
+      console.group('boink');
+      console.log('newVal', newVal);
+      console.log('top', top);
+      console.log('bottom', bottom);
+      console.groupEnd();
+      return;
+    }
+    if (min === value && newVal < 0) return;
+    setVerticalDistanceSwiped(touchStartPosition - gety(e));
+  };
   const swipeDistance = 30;
   const onTouchEnd = () => {
     if (noFlick || editing) return;
@@ -167,14 +182,11 @@ const NumberSelect = _ref => {
     // do haptix?
   };
   const offset = Math.min(Math.max(verticalDistanceSwiped, swipeDistance * -1), swipeDistance) / swipeDistance;
-  const blobOffsetUnit = "".concat(size * (1 - 0.7) / 2, "rem");
-  // const blobSize = `${size * .65}rem`;
-  const blobRadius = "".concat(size * .65 / 2, "rem");
   let top = 0,
     bottom = 0;
   if (offset !== 0) {
     const absValue = Math.abs(offset);
-    const distance = size / 3 * absValue;
+    const distance = size / 5 * absValue;
     const boop = "-".concat(distance, "rem");
     if (offset > 0) {
       top = boop;
@@ -186,19 +198,49 @@ const NumberSelect = _ref => {
     top,
     bottom
   };
+
+  // const florp = Math.max(0, Math.abs(offset) - 0.3) * 1.5;
+  const florp = Math.max(0, Math.abs(offset) - 0.5) * 1.5;
   return /*#__PURE__*/_react.default.createElement("div", {
     onTouchStart: onTouchStart,
     onTouchMove: onTouchMove,
     onTouchEnd: onTouchEnd,
     className: "numberSelect ".concat(editing ? 'numberSelect_editing' : '', " ").concat(doneClosing ? 'numberSelect_doneClosing' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "plusMinus plus",
+    style: {
+      top: "-".concat(size / 5, "rem"),
+      opacity: offset > 0 ? florp : 0,
+      height: "".concat(size / 3, "rem")
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    height: "".concat(size / 4, "rem"),
+    viewBox: "0 0 271 153",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M136.68 19.1619L17.4993 133.606H47.2944L136.68 64.9149L226.065 133.606H255.86L136.68 19.1619Z",
+    fill: color
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "plusMinus minus",
+    style: {
+      bottom: "-".concat(size / 5, "rem"),
+      opacity: offset < 0 ? florp : 0,
+      height: "".concat(size / 3, "rem")
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    height: "".concat(size / 4, "rem"),
+    viewBox: "0 0 271 153",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M136.68 133.606L17.4993 19.1621H47.2944L136.68 87.8532L226.065 19.1621H255.86L136.68 133.606Z",
+    fill: color
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "swipeBlobContainer"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "swipeBlob",
     style: _objectSpread({
-      left: "".concat(blobOffsetUnit),
-      right: "".concat(blobOffsetUnit),
-      borderRadius: blobRadius,
+      left: "".concat(size * 0.02, "rem"),
+      right: "".concat(size * 0.02, "rem"),
       backgroundColor: numberBgColor
     }, blobStyle)
   })), /*#__PURE__*/_react.default.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grevlingui",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "description": "GUI elements",
   "module": "index.js",
   "dependencies": {