Mb/9/new toggles

app/components/avatar/badge.gjs

@@ -79,6 +79,7 @@ export default class OpenToFiles extends Component {
           xlink:href='#curve'
           id='textPath1'
           dx='2.72'
+          startOffset='{{this.settings.textOffset}}'
         >{{this.settings.text}}</textPath></text></svg>
   </template>
 }

app/components/avatar/index.gjs

@@ -1,11 +1,27 @@
 import Component from '@glimmer/component';
 import AvatarImage from './image';
 import AvatarBadge from './badge';
+import { inject as service } from '@ember/service';
 
 export default class OpenToFiles extends Component {
+  @service settings;
+
   <template>
-    <div class='w-full aspect-square' id={{@id}}>
-      <div class='w-full aspect-square rounded-full overflow-hidden relative'>
+    <div
+      class='w-full aspect-square'
+      id={{@id}}
+      style='
+        background-color: {{if
+        this.settings.backgroundColour
+        this.settings.backgroundColour
+      }}'
+    >
+      <div
+        class='w-full aspect-square
+          {{if this.settings.cropToCircle "rounded-full"}}
+          overflow-hidden relative'
+        ...attributes
+      >
         <AvatarImage @file={{@file}} />
         <AvatarBadge />
       </div>

app/components/open-to/export/index.gjs

@@ -12,6 +12,7 @@ import html2canvas from '@jsplumb/html2canvas';
 
 export default class OpenToExport extends Component {
   @service fileQueue;
+  @service settings;
 
   get isExportDisabled() {
     return this.fileQueue.files.length === 0;
@@ -20,9 +21,11 @@ export default class OpenToExport extends Component {
   @action
   exportImages() {
     for (const file of this.fileQueue.files) {
-      html2canvas(document.getElementById(file.id)).then((canvas) => {
+      html2canvas(document.getElementById(file.id), {
+        backgroundColor: null,
+      }).then((canvas) => {
         var link = document.createElement('a');
-        link.download = 'my-image-name.jpeg';
+        link.download = `${this.settings.text}.png`;
         link.href = canvas.toDataURL('image/png');
         link.click();
       });

app/components/open-to/files/index.gjs

@@ -11,7 +11,7 @@ export default class OpenToFiles extends Component {
       <ul role='list' class='grid grid-cols-1 gap-x-4 gap-y-8 sm:gap-x-6'>
         {{#each queue.files as |file|}}
           <li>
-            <div class='mx-auto w-full aspect-square relative bg-white'>
+            <div class='mx-auto w-full aspect-square relative'>
               <OpenToFilesPreview @file={{file}} />
             </div>
           </li>

app/components/open-to/files/upload/index.gjs

@@ -17,11 +17,7 @@ export default class OpenToFilesUpload extends Component {
 
   <template>
     {{#let (fileQueue onFileAdded=this.uploadPhoto) as |queue|}}
-      <FileDropzone
-        @queue={{queue}}
-        class='w-full aspect-square rounded-full border-dashed border-4 border-slate-400 flex items-center justify-center'
-        as |dropzone|
-      >
+      <FileDropzone @queue={{queue}} class='' as |dropzone|>
 
         {{#if dropzone.active}}
           <Instructions>
@@ -34,7 +30,10 @@ export default class OpenToFilesUpload extends Component {
         {{else}}
           <div class='relative w-full aspect-square'>
             <div class='absolute top-0 left-0 w-full aspect-square'>
-              <Avatar @file='/images/unicorn.webp' />
+              <Avatar
+                class='border-dashed border-4 border-slate-400'
+                @file='/images/unicorn.webp'
+              />
             </div>
 
             <Instructions>

app/components/open-to/toggles/index.gjs

@@ -5,10 +5,23 @@ import { Input } from '@frontile/forms';
 import { inject as service } from '@ember/service';
 import set from 'ember-set-helper/helpers/set';
 import { hash } from '@ember/helper';
+import { ToggleButton } from '@frontile/buttons';
+import Circle from 'ember-phosphor-icons/components/ph-circle';
+import Square from 'ember-phosphor-icons/components/ph-square';
+import { Checkbox } from '@frontile/forms';
+import { ButtonGroup } from '@frontile/buttons';
+import { fn } from '@ember/helper';
+import { not } from 'ember-truth-helpers';
+import { RadioGroup } from '@frontile/forms';
+import { Radio } from '@frontile/forms';
 
 export default class OpenToToggles extends Component {
   @service settings;
 
+  foo = (a, b) => {
+    console.log(a, b);
+  };
+
   <template>
     <form class='grid grid-cols-1 sm:grid-cols-3 gap-4 items-end'>
       <Input
@@ -31,6 +44,31 @@ export default class OpenToToggles extends Component {
         @onChange={{set this.settings 'colourStop'}}
         @classes={{hash input='p-1 h-11'}}
       />
+      <RadioGroup
+        @label={{t 'toggles.crop-to-circle'}}
+        @orientation='horizontal'
+        @value={{this.settings.cropToCircle}}
+        @onChange={{set this.settings 'cropToCircle'}}
+        as |Radio|
+      >
+        <Radio @label={{t 'toggles.crop-to.circle'}} @value={{true}} />
+        <Radio @label={{t 'toggles.crop-to.square'}} @value={{false}} />
+      </RadioGroup>
+      <Input
+        @type='color'
+        @label={{t 'toggles.background-colour'}}
+        @value={{this.settings.backgroundColour}}
+        @onChange={{set this.settings 'backgroundColour'}}
+        @classes={{hash input='p-1 h-11'}}
+      />
+      <Input
+        @type='range'
+        @label={{t 'toggles.text-offset'}}
+        @value={{this.settings.textOffset}}
+        @onInput={{set this.settings 'textOffset'}}
+        min='0'
+        max='200'
+      />
     </form>
   </template>
 }

app/services/settings.js

@@ -5,4 +5,7 @@ export default class SettingsService extends Service {
   @tracked text = '#OpenTo...';
   @tracked colourStart = '#a855f7';
   @tracked colourStop = '#ec4899';
+  @tracked cropToCircle = true;
+  @tracked backgroundColour = null;
+  @tracked textOffset = 0;
 }

package.json

@@ -102,6 +102,7 @@
     "ember-source": "~5.11.0",
     "ember-template-imports": "^4.1.1",
     "ember-template-lint": "^5.13.0",
+    "ember-truth-helpers": "^4.0.3",
     "ember-web-app": "^5.0.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

translations/en-us.yaml

@@ -8,6 +8,12 @@ toggles:
   text: Text
   colour-start: Colour start
   colour-stop: Colour stop
+  crop-to-circle: Crop to
+  crop-to:
+    circle: Circle
+    square: Square
+  background-colour: Background colour
+  text-offset: Text offset
 export:
   button: Export
 footer: