https://1rosehip.atlassian.net/browse/RRS-101

mzusin · Jul 24, 2023 · 0d51841 · 0d51841
1 parent 8833c75
commit 0d51841
Show file tree

Hide file tree

Showing 27 changed files with 114 additions and 91 deletions.
diff --git a/docs/css/styles.1690040828708.css → docs/css/styles.1690181199516.css b/docs/css/styles.1690040828708.css → docs/css/styles.1690181199516.css
diff --git a/docs/index.html b/docs/index.html
@@ -19,8 +19,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="font-josefin_sans text-lg text-gray-100 hp-bg dark" id="special-page">
@@ -398,6 +398,6 @@ <h2 class="mt-8 font-semibold text-sky-500">Free</h2>
 
 </div>
 
-  <script src="/js/index.1690040828708.js"></script>
+  <script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/js/index.1690040828708.js → docs/js/index.1690181199516.js b/docs/js/index.1690040828708.js → docs/js/index.1690181199516.js
diff --git a/docs/js/index.1690040828708.js.map → docs/js/index.1690181199516.js.map b/docs/js/index.1690040828708.js.map → docs/js/index.1690181199516.js.map
diff --git a/docs/pages/animation.html b/docs/pages/animation.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -220,6 +220,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/basic-usage.html b/docs/pages/basic-usage.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -208,6 +208,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/circle-gradient.html b/docs/pages/circle-gradient.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -254,6 +254,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/connection.html b/docs/pages/connection.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -243,6 +243,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/custom-pointer-shape.html b/docs/pages/custom-pointer-shape.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -219,6 +219,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/data-settings.html b/docs/pages/data-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -242,6 +242,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/disabled-state.html b/docs/pages/disabled-state.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -229,6 +229,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/individual-pointer-settings.html b/docs/pages/individual-pointer-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -278,6 +278,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/path-settings.html b/docs/pages/path-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -269,6 +269,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/pointer-and-connection-gradient.html b/docs/pages/pointer-and-connection-gradient.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -238,6 +238,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/pointer-settings.html b/docs/pages/pointer-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -268,6 +268,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/pointers-overlap.html b/docs/pages/pointers-overlap.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -210,6 +210,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/text-values.html b/docs/pages/text-values.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -183,6 +183,11 @@
     <span class="hljs-comment">// The default value is 0.</span>
     textOffsetY?: <span class="hljs-built_in">number</span>;
 
+    <span class="hljs-comment">// A string specifying the text betwen slider&#x27;s pointer values (for</span>
+    <span class="hljs-comment">// example, •, | or -).</span>
+    <span class="hljs-comment">// The default value is undefined.</span>
+    textBetween?: <span class="hljs-built_in">string</span>;
+
     <span class="hljs-comment">// ... other settings ...</span>
 }</code></pre>
 <p class="mb-4">For example:</p>
@@ -201,13 +206,14 @@
     <span class="hljs-keyword">return</span> (
         <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RoundSlider</span>
             <span class="hljs-attr">hideText</span>=<span class="hljs-string">{</span> <span class="hljs-attr">false</span> }
-            <span class="hljs-attr">textPrefix</span>=<span class="hljs-string">{</span> &#x27; &#x27; }
+            <span class="hljs-attr">textPrefix</span>=<span class="hljs-string">{</span> &#x27;&#x27; }
             <span class="hljs-attr">textSuffix</span>=<span class="hljs-string">{</span> &#x27;<span class="hljs-attr">px</span>&#x27; }
             <span class="hljs-attr">textColor</span>=<span class="hljs-string">{</span> &#x27;#<span class="hljs-attr">8993B7</span>&#x27; }
             <span class="hljs-attr">textFontSize</span>=<span class="hljs-string">{</span> <span class="hljs-attr">24</span> }
             <span class="hljs-attr">textFontFamily</span>=<span class="hljs-string">{</span> &#x27;<span class="hljs-attr">Helvetica</span>,<span class="hljs-attr">Arial</span>,<span class="hljs-attr">sans-serif</span>&#x27; }
             <span class="hljs-attr">textOffsetX</span>=<span class="hljs-string">{</span> <span class="hljs-attr">0</span> }
             <span class="hljs-attr">textOffsetY</span>=<span class="hljs-string">{</span> <span class="hljs-attr">0</span> }
+            <span class="hljs-attr">textBetween</span>=<span class="hljs-string">{</span> &#x27; • &#x27;}
 
             <span class="hljs-attr">pointers</span>=<span class="hljs-string">{</span> <span class="hljs-attr">pointers</span> }
             <span class="hljs-attr">onChange</span>=<span class="hljs-string">{</span> <span class="hljs-attr">setPointers</span> }
@@ -256,6 +262,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/ticks-settings.html b/docs/pages/ticks-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -266,6 +266,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/ticks-values.html b/docs/pages/ticks-values.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -280,6 +280,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/docs/pages/values-list.html b/docs/pages/values-list.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1690040828708.css" />
-  <!--<link rel="stylesheet" href="/js/index.1690040828708.css" />-->
+  <link rel="stylesheet" href="/css/styles.1690181199516.css" />
+  <!--<link rel="stylesheet" href="/js/index.1690181199516.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -225,6 +225,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1690040828708.js"></script>
+<script src="/js/index.1690181199516.js"></script>
 </body>
 </html>
diff --git a/src/core/domain/settings-provider.ts b/src/core/domain/settings-provider.ts
@@ -55,6 +55,7 @@ export interface ISettings {
     textFontFamily?: string;
     textOffsetX?: number;
     textOffsetY?: number;
+    textBetween?: string;
 
     // ticks -----------------
     enableTicks?: boolean;

diff --git a/src/core/ui/Text.tsx b/src/core/ui/Text.tsx
@@ -41,7 +41,9 @@ const Text = (props: ITextProps) => {
         });
 
         const texts = values.map(value => `${ settings.textPrefix || '' }${ value }${ settings.textSuffix || '' }`);
-        setValue(texts.join(' '));
+
+        const textBetween = getString(settings.textBetween, ' ');
+        setValue(texts.join(textBetween));
 
     }, [
         data,