Merge pull request #18 from MichalBryxi/fix/17/slider-looks-like-slider

fix: Slider looks like slider
MichalBryxi · Oct 4, 2024 · 19edf39 · 19edf39
2 parents 1482fc6 + d22ed06
commit 19edf39
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/app/components/avatar/badge.gjs b/app/components/avatar/badge.gjs
@@ -1,9 +1,15 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 
+const TEXT_OFFSET_MAX = 200;
+
 export default class OpenToFiles extends Component {
   @service settings;
 
+  get textOffsetAdjusted() {
+    return TEXT_OFFSET_MAX * (this.settings.textOffset / 100);
+  }
+
   <template>
     <svg
       viewBox='0 0 500 500'
@@ -79,7 +85,7 @@ export default class OpenToFiles extends Component {
           xlink:href='#curve'
           id='textPath1'
           dx='2.72'
-          startOffset='{{this.settings.textOffset}}'
+          startOffset='{{this.textOffsetAdjusted}}'
         >{{this.settings.text}}</textPath></text></svg>
   </template>
 }
diff --git a/app/components/open-to/toggles/index.gjs b/app/components/open-to/toggles/index.gjs
@@ -57,13 +57,23 @@ export default class OpenToToggles extends Component {
         @onChange={{set this.settings 'backgroundColour'}}
         @classes={{hash input='p-1 h-11'}}
       />
+
+      <datalist id='markers'>
+        <option value='0'></option>
+        <option value='25'></option>
+        <option value='50'></option>
+        <option value='75'></option>
+        <option value='100'></option>
+      </datalist>
       <Input
         @type='range'
         @label={{t 'toggles.text-offset'}}
         @value={{this.settings.textOffset}}
         @onInput={{set this.settings 'textOffset'}}
+        @classes={{hash input='appearance-auto'}}
         min='0'
-        max='200'
+        max='100'
+        list='markers'
       />
     </form>
   </template>