remote-calibrator 0.3.0-beta.6 → 0.3.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remote-calibrator",
-  "version": "0.3.0-beta.6",
+  "version": "0.3.0-beta.7",
   "description": "A toolbox for remote testing calibration and tracking.",
   "main": "lib/RemoteCalibrator.min.js",
   "directories": {
@@ -42,18 +42,18 @@
     "husky": "^7.0.2",
     "lint-staged": "^11.2.3",
     "nodemon": "^2.0.13",
-    "postcss-loader": "^6.1.1",
+    "postcss-loader": "^6.2.0",
     "prettier": "^2.4.1",
     "sass": "^1.42.1",
-    "sass-loader": "^12.1.0",
+    "sass-loader": "^12.2.0",
     "style-loader": "^3.3.0",
     "svg-inline-loader": "^0.8.2",
     "terser-webpack-plugin": "^5.2.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.58.1",
+    "webpack": "^5.58.2",
     "webpack-cli": "^4.9.0",
     "webpack-modules": "^1.0.0",
-    "xlsx": "^0.17.2"
+    "xlsx": "^0.17.3"
   },
   "lint-staged": {
     "*.js": "eslint --cache --fix",

package/src/components/swalOptions.js

@@ -21,7 +21,7 @@ export const swalInfoOptions = RC => {
     customClass: {
       icon: 'my__swal2__icon',
       title: 'my__swal2__title',
-      htmlContainer: 'my__swal2__html',
+      htmlContainer: 'my__swal2__html' + ` rc-lang-${RC.LD.toLowerCase()}`,
     },
   }
 }

package/src/const.js

@@ -25,4 +25,6 @@ RemoteCalibrator.prototype._CONST = Object.freeze({
     ORANGE: '#ff9a00',
     DARK_RED: '#ac0d0d',
   },
+  LTR: 'LTR',
+  RTL: 'RTL',
 })

package/src/core.js

@@ -127,6 +127,10 @@ class RemoteCalibrator {
     return this._lang
   }
 
+  get LD() {
+    return this.languageDirection.value
+  }
+
   get language() {
     return this._helper_get(this._langData, 'language')
   }
@@ -555,6 +559,7 @@ RemoteCalibrator.prototype._addBackground = function (inner) {
   if (!b) {
     b = document.createElement('div')
     b.id = 'calibration-background'
+    b.className = 'calibration-background' + ` rc-lang-${this.LD.toLowerCase()}`
 
     document.body.classList.add('lock-view')
     document.body.appendChild(b)

package/src/css/buttons.scss

@@ -8,15 +8,31 @@
 .rc-button {
   text-align: center;
   border: none !important;
-  background: #ffffffee;
   line-height: 150% !important;
   font-size: 1rem !important;
   font-weight: 700 !important;
-  color: #333;
   padding: 1rem 1.5rem !important;
   margin: 0.25rem !important;
   border-radius: 7px !important;
   cursor: pointer;
+}
+
+.rc-go-button {
+  background: #ff9a00aa;
+  color: #fff;
+
+  &:hover {
+    background: #ff9a00;
+  }
+
+  &:active {
+    background: #d68200;
+  }
+}
+
+.rc-cancel-button {
+  background: #ffffffee;
+  color: #333;
 
   &:hover {
     background: #ddd;

package/src/css/main.css

@@ -28,7 +28,6 @@
 
 .calibration-instruction {
   position: absolute;
-  text-align: left;
   user-select: none;
 }
 
@@ -136,12 +135,11 @@
   position: fixed !important;
   width: 100% !important;
   bottom: 3px !important;
-  left: 50% !important;
-  transform: translate(-50%, 0) !important;
   color: #999 !important;
   margin: 0 !important;
   padding: 0 !important;
   line-height: 100% !important;
+  text-align: center !important;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -149,3 +147,15 @@
 .lock-view {
   overflow: hidden !important;
 }
+
+/* -------------------------------------------------------------------------- */
+
+.rc-lang-ltr {
+  direction: ltr !important;
+  text-align: left !important;
+}
+
+.rc-lang-rtl {
+  direction: rtl !important;
+  text-align: right !important;
+}

package/src/css/panel.scss

@@ -17,7 +17,6 @@
   border-radius: 10px !important;
   box-shadow: var(--rc-panel-darken-color-semi) 0px 50px 100px -20px,
     var(--rc-panel-theme-color-semi) 0px 30px 60px -30px !important;
-  text-align: left !important;
 
   * {
     outline: none;
@@ -100,10 +99,6 @@
     &.rc-panel-steps-s {
       flex-flow: column nowrap;
 
-      .rc-panel-step {
-        text-align: left;
-      }
-
       .rc-panel-step-name {
         margin: 1.2rem 1.5rem !important;
       }

package/src/css/screenSize.css

@@ -14,6 +14,7 @@
   cursor: grab;
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
+  direction: ltr !important;
 }
 
 .rc-slider:hover {
@@ -63,14 +64,14 @@
 }
 
 #size-arrow-fill {
-  transition: fill 0.1s;
+  transition: fill 0.3s;
 }
 
 .minor {
-  transition: opacity 0.1s;
+  transition: opacity 0.25s;
 }
 
-.rc-slider:hover ~ .size-obj .minor,
+/* .rc-slider:hover ~ .size-obj .minor, */
 .rc-slider:active ~ .size-obj .minor {
   opacity: 0;
 }

package/src/css/swal.css

@@ -25,7 +25,6 @@
   line-height: 150% !important;
   font-weight: normal !important;
   user-select: none !important;
-  text-align: left !important;
 }
 
 .animate__animated.animate__fadeInUp,