@signalk/app-dock 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +5 -3
  2. package/package.json +1 -1
  3. package/public/app-icon-180.png +0 -0
  4. package/public/app-icon-maskable.svg +14 -21
  5. package/public/app-icon.svg +15 -23
package/README.md CHANGED
@@ -148,13 +148,15 @@ The repo ships three cooperating surfaces:
148
148
 
149
149
  ### Icon assets
150
150
 
151
- If `public/app-icon.svg` changes, regenerate the 180-px apple-touch-icon:
151
+ `public/app-icon.svg` has a transparent background: the artwork sits straight on whatever page shows it, so its colours have to read on light and dark backgrounds alike. Check a change on both before committing.
152
+
153
+ The 180-px apple-touch-icon needs an opaque background, because iOS fills transparency with black, and room for the corners iOS rounds off. Regenerate it from the SVG whenever that changes:
152
154
 
153
155
  ```bash
154
- rsvg-convert -w 180 -h 180 public/app-icon.svg -o public/app-icon-180.png
156
+ rsvg-convert -w 132 -h 132 public/app-icon.svg | magick - -background '#0f172a' -gravity center -extent 180x180 -alpha remove -alpha off PNG24:public/app-icon-180.png
155
157
  ```
156
158
 
157
- `public/app-icon-maskable.svg` is a hand-authored wrapper that places the artwork inside Android's 80% safe zone; if the main icon's layout changes meaningfully, update it by hand to match.
159
+ `public/app-icon-maskable.svg` is hand-authored: the same artwork on the same dark slate, scaled into Android's 80% safe zone. Update it by hand when the artwork changes.
158
160
 
159
161
  ## License
160
162
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@signalk/app-dock",
3
- "version": "1.3.1",
3
+ "version": "1.3.2",
4
4
  "description": "macOS-style configurable app dock for switching between SignalK webapps on touch screens",
5
5
  "repository": {
6
6
  "url": "https://github.com/SignalK/app-dock"
package/public/app-icon-180.png CHANGED
Binary file
package/public/app-icon-maskable.svg CHANGED
@@ -1,24 +1,17 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
2
- <defs>
3
- <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
4
- <stop offset="0%" stop-color="#60a5fa"/>
5
- <stop offset="100%" stop-color="#2563eb"/>
6
- </linearGradient>
7
- </defs>
8
- <rect width="100" height="100" fill="url(#bg)"/>
9
- <g transform="translate(14 14)">
10
- <rect x="8" y="48" width="56" height="16" rx="8" fill="#ffffff" fill-opacity="0.25" stroke="#ffffff" stroke-opacity="0.4" stroke-width="0.5"/>
11
- <rect x="14" y="51" width="10" height="10" rx="2.5" fill="#3b82f6" opacity="0.9"/>
12
- <rect x="31" y="51" width="10" height="10" rx="2.5" fill="#10b981" opacity="0.9"/>
13
- <rect x="48" y="51" width="10" height="10" rx="2.5" fill="#f59e0b" opacity="0.9"/>
14
- <rect x="28" y="34" width="16" height="16" rx="3.5" fill="#10b981" opacity="0.95"/>
15
- <circle cx="36" cy="66" r="1.5" fill="#ffffff" fill-opacity="0.8"/>
16
- <circle cx="36" cy="22" r="10" fill="none" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1"/>
17
- <line x1="36" y1="14" x2="36" y2="18" stroke="#ffffff" stroke-opacity="0.3" stroke-width="1" stroke-linecap="round"/>
18
- <line x1="36" y1="26" x2="36" y2="30" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1" stroke-linecap="round"/>
19
- <line x1="28" y1="22" x2="32" y2="22" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1" stroke-linecap="round"/>
20
- <line x1="40" y1="22" x2="44" y2="22" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1" stroke-linecap="round"/>
21
- <polygon points="36,15 34,22 36,20 38,22" fill="#ef4444" fill-opacity="0.7"/>
22
- <polygon points="36,29 34,22 36,24 38,22" fill="#ffffff" fill-opacity="0.25"/>
2
+ <rect width="100" height="100" fill="#0f172a"/>
3
+ <g transform="translate(22 22) scale(0.7778)">
4
+ <circle cx="36" cy="16" r="11" fill="none" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5"/>
5
+ <line x1="36" y1="3" x2="36" y2="7" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round"/>
6
+ <line x1="23" y1="16" x2="27" y2="16" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"/>
7
+ <line x1="45" y1="16" x2="49" y2="16" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"/>
8
+ <polygon points="36,8 33,16 36,14 39,16" fill="#ef4444"/>
9
+ <polygon points="36,24 33,16 36,18 39,16" fill="#64748b"/>
10
+ <rect x="3" y="44" width="66" height="22" rx="11" fill="#3b82f6" fill-opacity="0.15" stroke="#3b82f6" stroke-width="1.5"/>
11
+ <rect x="9" y="49" width="12" height="12" rx="3" fill="#3b82f6"/>
12
+ <rect x="30" y="49" width="12" height="12" rx="3" fill="#10b981"/>
13
+ <rect x="51" y="49" width="12" height="12" rx="3" fill="#f59e0b"/>
14
+ <rect x="27" y="29" width="18" height="18" rx="4.5" fill="#10b981"/>
15
+ <circle cx="36" cy="69.5" r="2" fill="#3b82f6"/>
23
16
  </g>
24
17
  </svg>
package/public/app-icon.svg CHANGED
@@ -1,29 +1,21 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="72" height="72">
2
- <defs>
3
- <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
4
- <stop offset="0%" stop-color="#60a5fa"/>
5
- <stop offset="100%" stop-color="#2563eb"/>
6
- </linearGradient>
7
- </defs>
8
- <!-- Background, full bleed: whatever displays the icon rounds the corners -->
9
- <rect width="72" height="72" fill="url(#bg)"/>
2
+ <!-- Transparent background: the artwork is drawn straight on the canvas in
3
+ mid-tone colours that read on light and dark pages alike -->
4
+ <!-- Compass rose -->
5
+ <circle cx="36" cy="16" r="11" fill="none" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5"/>
6
+ <line x1="36" y1="3" x2="36" y2="7" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round"/>
7
+ <line x1="23" y1="16" x2="27" y2="16" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"/>
8
+ <line x1="45" y1="16" x2="49" y2="16" stroke="#3b82f6" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"/>
9
+ <polygon points="36,8 33,16 36,14 39,16" fill="#ef4444"/>
10
+ <polygon points="36,24 33,16 36,18 39,16" fill="#64748b"/>
10
11
  <!-- Dock pill -->
11
- <rect x="8" y="48" width="56" height="16" rx="8" fill="#ffffff" fill-opacity="0.25" stroke="#ffffff" stroke-opacity="0.4" stroke-width="0.5"/>
12
+ <rect x="3" y="44" width="66" height="22" rx="11" fill="#3b82f6" fill-opacity="0.15" stroke="#3b82f6" stroke-width="1.5"/>
12
13
  <!-- Dock icons - 3 squares in the pill -->
13
- <rect x="14" y="51" width="10" height="10" rx="2.5" fill="#3b82f6" opacity="0.9"/>
14
- <rect x="31" y="51" width="10" height="10" rx="2.5" fill="#10b981" opacity="0.9"/>
15
- <rect x="48" y="51" width="10" height="10" rx="2.5" fill="#f59e0b" opacity="0.9"/>
14
+ <rect x="9" y="49" width="12" height="12" rx="3" fill="#3b82f6"/>
15
+ <rect x="30" y="49" width="12" height="12" rx="3" fill="#10b981"/>
16
+ <rect x="51" y="49" width="12" height="12" rx="3" fill="#f59e0b"/>
16
17
  <!-- Middle icon magnified (popping up) -->
17
- <rect x="28" y="34" width="16" height="16" rx="3.5" fill="#10b981" opacity="0.95"/>
18
+ <rect x="27" y="29" width="18" height="18" rx="4.5" fill="#10b981"/>
18
19
  <!-- Active dot under middle icon -->
19
- <circle cx="36" cy="66" r="1.5" fill="#ffffff" fill-opacity="0.8"/>
20
- <!-- Compass rose hint -->
21
- <circle cx="36" cy="22" r="10" fill="none" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1"/>
22
- <line x1="36" y1="14" x2="36" y2="18" stroke="#ffffff" stroke-opacity="0.3" stroke-width="1" stroke-linecap="round"/>
23
- <line x1="36" y1="26" x2="36" y2="30" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1" stroke-linecap="round"/>
24
- <line x1="28" y1="22" x2="32" y2="22" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1" stroke-linecap="round"/>
25
- <line x1="40" y1="22" x2="44" y2="22" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1" stroke-linecap="round"/>
26
- <!-- Compass needle -->
27
- <polygon points="36,15 34,22 36,20 38,22" fill="#ef4444" fill-opacity="0.7"/>
28
- <polygon points="36,29 34,22 36,24 38,22" fill="#ffffff" fill-opacity="0.25"/>
20
+ <circle cx="36" cy="69.5" r="2" fill="#3b82f6"/>
29
21
  </svg>