From 1faca90378df140101afed3b7b27326838cbcf7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Bryxi=CC=81?= <michal.bryxi@gmail.com>
Date: Sun, 29 Sep 2024 14:40:30 +0200
Subject: [PATCH 1/6] feat: CropToCircle toggle

---
 app/components/avatar/index.gjs               |  5 ++++-
 app/components/open-to/files/upload/index.gjs | 11 +++++------
 app/components/open-to/toggles/index.gjs      | 14 ++++++++++++++
 app/services/settings.js                      |  1 +
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/components/avatar/index.gjs b/app/components/avatar/index.gjs
index c93b654..8369d2f 100644
--- a/app/components/avatar/index.gjs
+++ b/app/components/avatar/index.gjs
@@ -5,7 +5,10 @@ import AvatarBadge from './badge';
 export default class OpenToFiles extends Component {
   <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 rounded-full overflow-hidden relative'
+        ...attributes
+      >
         <AvatarImage @file={{@file}} />
         <AvatarBadge />
       </div>
diff --git a/app/components/open-to/files/upload/index.gjs b/app/components/open-to/files/upload/index.gjs
index d9605b3..a358b49 100644
--- a/app/components/open-to/files/upload/index.gjs
+++ b/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>
diff --git a/app/components/open-to/toggles/index.gjs b/app/components/open-to/toggles/index.gjs
index efd975e..7bdcf26 100644
--- a/app/components/open-to/toggles/index.gjs
+++ b/app/components/open-to/toggles/index.gjs
@@ -5,6 +5,9 @@ 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';
 
 export default class OpenToToggles extends Component {
   @service settings;
@@ -31,6 +34,17 @@ export default class OpenToToggles extends Component {
         @onChange={{set this.settings 'colourStop'}}
         @classes={{hash input='p-1 h-11'}}
       />
+      <ToggleButton
+        @isSelected={{this.settings.cropToCircle}}
+        @onChange={{set this.settings 'cropToCircle'}}
+        @label={{t 'toggles.crop-to-circle'}}
+      >
+        {{#if this.settings.cropToCircle}}
+          <Circle />
+        {{else}}
+          <Square />
+        {{/if}}
+      </ToggleButton>
     </form>
   </template>
 }
diff --git a/app/services/settings.js b/app/services/settings.js
index a611fa9..162f22a 100644
--- a/app/services/settings.js
+++ b/app/services/settings.js
@@ -5,4 +5,5 @@ export default class SettingsService extends Service {
   @tracked text = '#OpenTo...';
   @tracked colourStart = '#a855f7';
   @tracked colourStop = '#ec4899';
+  @tracked cropToCircle = true;
 }

From 250bb26b091bce902a5faefff8187b5cce017296 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Bryxi=CC=81?= <michal.bryxi@gmail.com>
Date: Mon, 30 Sep 2024 23:14:30 +0200
Subject: [PATCH 2/6] feat: crop-to

---
 app/components/avatar/index.gjs          |  7 +++-
 app/components/open-to/toggles/index.gjs | 43 ++++++++++++++++++++++--
 package.json                             |  1 +
 pnpm-lock.yaml                           | 16 +++++++++
 translations/en-us.yaml                  |  4 +++
 5 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/app/components/avatar/index.gjs b/app/components/avatar/index.gjs
index 8369d2f..4f8d4b1 100644
--- a/app/components/avatar/index.gjs
+++ b/app/components/avatar/index.gjs
@@ -1,12 +1,17 @@
 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'
+        class='w-full aspect-square
+          {{if this.settings.cropToCircle "rounded-full" ""}}
+          overflow-hidden relative'
         ...attributes
       >
         <AvatarImage @file={{@file}} />
diff --git a/app/components/open-to/toggles/index.gjs b/app/components/open-to/toggles/index.gjs
index 7bdcf26..7cb7dad 100644
--- a/app/components/open-to/toggles/index.gjs
+++ b/app/components/open-to/toggles/index.gjs
@@ -8,10 +8,20 @@ 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
@@ -34,8 +44,8 @@ export default class OpenToToggles extends Component {
         @onChange={{set this.settings 'colourStop'}}
         @classes={{hash input='p-1 h-11'}}
       />
-      <ToggleButton
-        @isSelected={{this.settings.cropToCircle}}
+      {{!-- <Checkbox
+        @checked={{this.settings.cropToCircle}}
         @onChange={{set this.settings 'cropToCircle'}}
         @label={{t 'toggles.crop-to-circle'}}
       >
@@ -44,7 +54,34 @@ export default class OpenToToggles extends Component {
         {{else}}
           <Square />
         {{/if}}
-      </ToggleButton>
+      </Checkbox> --}}
+
+      {{!-- <ButtonGroup as |g|>
+        <g.ToggleButton
+          @isSelected={{this.settings.cropToCircle}}
+          @onChange={{set this.settings 'cropToCircle'}}
+        >
+          <Circle />
+        </g.ToggleButton>
+        <g.ToggleButton
+          @isSelected={{not this.settings.cropToCircle}}
+          @onChange={{this.foo}}
+          @onChange={{set this.settings 'cropToCircle'}}
+        >
+          <Square />
+        </g.ToggleButton>
+        {{this.settings.cropToCircle}}
+      </ButtonGroup> --}}
+      <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>
     </form>
   </template>
 }
diff --git a/package.json b/package.json
index a806377..88378d9 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6c742f4..ffd377d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -240,6 +240,9 @@ importers:
       ember-template-lint:
         specifier: ^5.13.0
         version: 5.13.0
+      ember-truth-helpers:
+        specifier: ^4.0.3
+        version: 4.0.3(ember-source@5.11.0(@glimmer/component@1.1.2(@babel/core@7.25.2))(@glint/template@1.4.0)(rsvp@4.8.5)(webpack@5.94.0))
       ember-web-app:
         specifier: ^5.0.1
         version: 5.0.1
@@ -4193,6 +4196,11 @@ packages:
     resolution: {integrity: sha512-eL7lZat68E6P/D7b9UoTB5bB5Oh/0aju0Z7PCMi3aTwhaydRaxloE7TGrTRYU+NdJuyNVZXeGyxFxn2frvd3TA==}
     engines: {node: 12.* || >= 14}
 
+  ember-truth-helpers@4.0.3:
+    resolution: {integrity: sha512-T6Ogd3pk9FxYiZfSxdjgn3Hb3Ksqgw7CD23V9qfig9jktNdkNEHo4+3PA3cSD/+3a2kdH3KmNvKyarVuzdtEkA==}
+    peerDependencies:
+      ember-source: '>=3.28.0'
+
   ember-velcro@2.2.0:
     resolution: {integrity: sha512-+5qVN0xGgr5N+CVEK1cKBGsfUNBfOQrakfz/4qOdE8YYFc0Prlo8ZXs8Je/Juop4OcZTGXMa5QlY/2okMo+X8A==}
     engines: {node: 14.* || >= 16}
@@ -13688,6 +13696,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  ember-truth-helpers@4.0.3(ember-source@5.11.0(@glimmer/component@1.1.2(@babel/core@7.25.2))(@glint/template@1.4.0)(rsvp@4.8.5)(webpack@5.94.0)):
+    dependencies:
+      '@embroider/addon-shim': 1.8.9
+      ember-functions-as-helper-polyfill: 2.1.2(ember-source@5.11.0(@glimmer/component@1.1.2(@babel/core@7.25.2))(@glint/template@1.4.0)(rsvp@4.8.5)(webpack@5.94.0))
+      ember-source: 5.11.0(@glimmer/component@1.1.2(@babel/core@7.25.2))(@glint/template@1.4.0)(rsvp@4.8.5)(webpack@5.94.0)
+    transitivePeerDependencies:
+      - supports-color
+
   ember-velcro@2.2.0(ember-modifier@4.2.0(@babel/core@7.25.2)(ember-source@5.11.0(@glimmer/component@1.1.2(@babel/core@7.25.2))(@glint/template@1.4.0)(rsvp@4.8.5)(webpack@5.94.0)))(ember-source@5.11.0(@glimmer/component@1.1.2(@babel/core@7.25.2))(@glint/template@1.4.0)(rsvp@4.8.5)(webpack@5.94.0)):
     dependencies:
       '@embroider/addon-shim': 1.8.9
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 77fb041..57573ed 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -8,6 +8,10 @@ toggles:
   text: Text
   colour-start: Colour start
   colour-stop: Colour stop
+  crop-to-circle: Crop to
+  crop-to:
+    circle: Circle
+    square: Square
 export:
   button: Export
 footer:

From 63bde094e87d9c7df6ebc886d9b3e7c3e6f6cc7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Bryxi=CC=81?= <michal.bryxi@gmail.com>
Date: Mon, 30 Sep 2024 23:31:30 +0200
Subject: [PATCH 3/6] feat: Transparent background

---
 app/components/open-to/export/index.gjs | 6 ++++--
 app/components/open-to/files/index.gjs  | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/components/open-to/export/index.gjs b/app/components/open-to/export/index.gjs
index d053897..e2686d0 100644
--- a/app/components/open-to/export/index.gjs
+++ b/app/components/open-to/export/index.gjs
@@ -20,9 +20,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 = 'my-image-name.png';
         link.href = canvas.toDataURL('image/png');
         link.click();
       });
diff --git a/app/components/open-to/files/index.gjs b/app/components/open-to/files/index.gjs
index 77ff2fd..e21fe99 100644
--- a/app/components/open-to/files/index.gjs
+++ b/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>

From 04a6e9eed8f0d34b4e5d7f5b2f622250a33a31b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Bryxi=CC=81?= <michal.bryxi@gmail.com>
Date: Mon, 30 Sep 2024 23:33:38 +0200
Subject: [PATCH 4/6] feat: Filename is cute

---
 app/components/open-to/export/index.gjs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/open-to/export/index.gjs b/app/components/open-to/export/index.gjs
index e2686d0..9ced89d 100644
--- a/app/components/open-to/export/index.gjs
+++ b/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;
@@ -24,7 +25,7 @@ export default class OpenToExport extends Component {
         backgroundColor: null,
       }).then((canvas) => {
         var link = document.createElement('a');
-        link.download = 'my-image-name.png';
+        link.download = `${this.settings.text}.png`;
         link.href = canvas.toDataURL('image/png');
         link.click();
       });

From 450ac4e519fb1a312d180bafb3bb66c30ddcb5b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Bryxi=CC=81?= <michal.bryxi@gmail.com>
Date: Mon, 30 Sep 2024 23:45:53 +0200
Subject: [PATCH 5/6] feat: Background colour color picker

---
 app/components/avatar/index.gjs          | 12 ++++++--
 app/components/open-to/toggles/index.gjs | 35 +++++-------------------
 app/services/settings.js                 |  1 +
 translations/en-us.yaml                  |  1 +
 4 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/app/components/avatar/index.gjs b/app/components/avatar/index.gjs
index 4f8d4b1..faef33d 100644
--- a/app/components/avatar/index.gjs
+++ b/app/components/avatar/index.gjs
@@ -7,10 +7,18 @@ export default class OpenToFiles extends Component {
   @service settings;
 
   <template>
-    <div class='w-full aspect-square' id={{@id}}>
+    <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" ""}}
+          {{if this.settings.cropToCircle "rounded-full"}}
           overflow-hidden relative'
         ...attributes
       >
diff --git a/app/components/open-to/toggles/index.gjs b/app/components/open-to/toggles/index.gjs
index 7cb7dad..8d966b8 100644
--- a/app/components/open-to/toggles/index.gjs
+++ b/app/components/open-to/toggles/index.gjs
@@ -44,34 +44,6 @@ export default class OpenToToggles extends Component {
         @onChange={{set this.settings 'colourStop'}}
         @classes={{hash input='p-1 h-11'}}
       />
-      {{!-- <Checkbox
-        @checked={{this.settings.cropToCircle}}
-        @onChange={{set this.settings 'cropToCircle'}}
-        @label={{t 'toggles.crop-to-circle'}}
-      >
-        {{#if this.settings.cropToCircle}}
-          <Circle />
-        {{else}}
-          <Square />
-        {{/if}}
-      </Checkbox> --}}
-
-      {{!-- <ButtonGroup as |g|>
-        <g.ToggleButton
-          @isSelected={{this.settings.cropToCircle}}
-          @onChange={{set this.settings 'cropToCircle'}}
-        >
-          <Circle />
-        </g.ToggleButton>
-        <g.ToggleButton
-          @isSelected={{not this.settings.cropToCircle}}
-          @onChange={{this.foo}}
-          @onChange={{set this.settings 'cropToCircle'}}
-        >
-          <Square />
-        </g.ToggleButton>
-        {{this.settings.cropToCircle}}
-      </ButtonGroup> --}}
       <RadioGroup
         @label={{t 'toggles.crop-to-circle'}}
         @orientation='horizontal'
@@ -82,6 +54,13 @@ export default class OpenToToggles extends Component {
         <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'}}
+      />
     </form>
   </template>
 }
diff --git a/app/services/settings.js b/app/services/settings.js
index 162f22a..d05bc4b 100644
--- a/app/services/settings.js
+++ b/app/services/settings.js
@@ -6,4 +6,5 @@ export default class SettingsService extends Service {
   @tracked colourStart = '#a855f7';
   @tracked colourStop = '#ec4899';
   @tracked cropToCircle = true;
+  @tracked backgroundColour = null;
 }
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 57573ed..f257307 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -12,6 +12,7 @@ toggles:
   crop-to:
     circle: Circle
     square: Square
+  background-colour: Background colour
 export:
   button: Export
 footer:

From dd09dcec6a3e76c7957a81525a8b0dd9dd8b012a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Bryxi=CC=81?= <michal.bryxi@gmail.com>
Date: Mon, 30 Sep 2024 23:54:49 +0200
Subject: [PATCH 6/6] feat: Start offset

---
 app/components/avatar/badge.gjs          | 1 +
 app/components/open-to/toggles/index.gjs | 8 ++++++++
 app/services/settings.js                 | 1 +
 translations/en-us.yaml                  | 1 +
 4 files changed, 11 insertions(+)

diff --git a/app/components/avatar/badge.gjs b/app/components/avatar/badge.gjs
index 693382c..19377bc 100644
--- a/app/components/avatar/badge.gjs
+++ b/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>
 }
diff --git a/app/components/open-to/toggles/index.gjs b/app/components/open-to/toggles/index.gjs
index 8d966b8..8e9bfa9 100644
--- a/app/components/open-to/toggles/index.gjs
+++ b/app/components/open-to/toggles/index.gjs
@@ -61,6 +61,14 @@ export default class OpenToToggles extends Component {
         @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>
 }
diff --git a/app/services/settings.js b/app/services/settings.js
index d05bc4b..91b2de2 100644
--- a/app/services/settings.js
+++ b/app/services/settings.js
@@ -7,4 +7,5 @@ export default class SettingsService extends Service {
   @tracked colourStop = '#ec4899';
   @tracked cropToCircle = true;
   @tracked backgroundColour = null;
+  @tracked textOffset = 0;
 }
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index f257307..e1cb944 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -13,6 +13,7 @@ toggles:
     circle: Circle
     square: Square
   background-colour: Background colour
+  text-offset: Text offset
 export:
   button: Export
 footer: