feat(tool,neon_framework): Update logo and use adaptive icons

Signed-off-by: provokateurin <[email protected]>

.cspell/tools.txt

@@ -1,5 +1,6 @@
 aarch
 allprojects
+anydpi
 autoptr
 buildscript
 buildsystem
@@ -42,7 +43,7 @@ libflutter
 libgtk
 libsqlite
 mipmap
-Multimap
+multimap
 ndebug
 nodoc
 noopenapi

README.md

@@ -1,6 +1,6 @@
 # Neon
 
-<img src="assets/logo.svg" alt="Neon logo" width="200"/>
+<img src="assets/logo_inverted.svg" alt="Neon logo" width="200"/>
 
 A framework for building convergent cross-platform Nextcloud clients using Flutter.
 

packages/neon_framework/example/android/app/src/main/res/drawable/background_gradient.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape>
+            <gradient
+                    android:startColor="@color/background"
+                    android:endColor="@color/background_gradient"
+                    android:angle="45"/>
+        </shape>
+    </item>
+</selector>

packages/neon_framework/example/android/app/src/main/res/mipmap-anydpi-v26/dashboard_app.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/background_gradient"/>
+    <foreground>
+        <inset android:drawable="@drawable/dashboard_app_outline" android:inset="25%"/>
+    </foreground>
+    <monochrome>
+        <inset android:drawable="@drawable/dashboard_app_outline" android:inset="25%"/>
+    </monochrome>
+</adaptive-icon>

packages/neon_framework/example/android/app/src/main/res/mipmap-anydpi-v26/files_app.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/background_gradient"/>
+    <foreground>
+        <inset android:drawable="@drawable/files_app_outline" android:inset="25%"/>
+    </foreground>
+    <monochrome>
+        <inset android:drawable="@drawable/files_app_outline" android:inset="25%"/>
+    </monochrome>
+</adaptive-icon>

packages/neon_framework/example/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/background_gradient"/>
+    <foreground>
+        <inset android:drawable="@drawable/ic_launcher_outline" android:inset="25%"/>
+    </foreground>
+    <monochrome>
+        <inset android:drawable="@drawable/ic_launcher_outline" android:inset="25%"/>
+    </monochrome>
+</adaptive-icon>

packages/neon_framework/example/android/app/src/main/res/mipmap-anydpi-v26/news_app.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/background_gradient"/>
+    <foreground>
+        <inset android:drawable="@drawable/news_app_outline" android:inset="25%"/>
+    </foreground>
+    <monochrome>
+        <inset android:drawable="@drawable/news_app_outline" android:inset="25%"/>
+    </monochrome>
+</adaptive-icon>

packages/neon_framework/example/android/app/src/main/res/mipmap-anydpi-v26/notes_app.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/background_gradient"/>
+    <foreground>
+        <inset android:drawable="@drawable/notes_app_outline" android:inset="25%"/>
+    </foreground>
+    <monochrome>
+        <inset android:drawable="@drawable/notes_app_outline" android:inset="25%"/>
+    </monochrome>
+</adaptive-icon>

packages/neon_framework/example/android/app/src/main/res/mipmap-anydpi-v26/notifications_app.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/background_gradient"/>
+    <foreground>
+        <inset android:drawable="@drawable/notifications_app_outline" android:inset="25%"/>
+    </foreground>
+    <monochrome>
+        <inset android:drawable="@drawable/notifications_app_outline" android:inset="25%"/>
+    </monochrome>
+</adaptive-icon>

packages/neon_framework/example/android/app/src/main/res/mipmap-anydpi-v26/talk_app.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/background_gradient"/>
+    <foreground>
+        <inset android:drawable="@drawable/talk_app_outline" android:inset="25%"/>
+    </foreground>
+    <monochrome>
+        <inset android:drawable="@drawable/talk_app_outline" android:inset="25%"/>
+    </monochrome>
+</adaptive-icon>

packages/neon_framework/example/android/app/src/main/res/raw/keep.xml

@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:tools="http://schemas.android.com/tools"
-           tools:keep="@mipmap/*_app"/>
+           tools:keep="@mipmap/*_app,@drawable/*_app_*"/>

packages/neon_framework/example/android/app/src/main/res/values-night-v31/styles.xml

@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
+    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
     <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
         <item name="android:forceDarkAllowed">false</item>
         <item name="android:windowFullscreen">false</item>
         <item name="android:windowDrawsSystemBarBackgrounds">false</item>
         <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
         <item name="android:windowSplashScreenBackground">#202020</item>
         <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
-        <item name="android:windowSplashScreenIconBackgroundColor">#202020</item>
+        <item name="android:windowSplashScreenIconBackgroundColor">#0082c9</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your

packages/neon_framework/example/android/app/src/main/res/values-v31/styles.xml

@@ -8,7 +8,7 @@
         <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
         <item name="android:windowSplashScreenBackground">#ffffff</item>
         <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
-        <item name="android:windowSplashScreenIconBackgroundColor">#ffffff</item>
+        <item name="android:windowSplashScreenIconBackgroundColor">#0082c9</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your

packages/neon_framework/example/android/app/src/main/res/values/colors.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="background">#0082c9</color>
+    <color name="background_gradient">#1cafff</color>
+</resources>

packages/neon_framework/example/flutter_native_splash.yaml

@@ -4,7 +4,6 @@ flutter_native_splash:
   image: img/splash_icon.png
   android_12:
     image: img/splash_icon_android_12.png
-    icon_background_color: "#ffffff"
-    icon_background_color_dark: "#202020"
+    icon_background_color: "#0082c9"
   ios: false
   web: true

packages/neon_framework/example/lib/branding.dart

@@ -1,12 +1,9 @@
-import 'dart:ui';
-
 import 'package:neon_framework/theme.dart';
 import 'package:vector_graphics/vector_graphics.dart';
 
 /// The custom theme used in the Neon app.
 const neonTheme = NeonTheme(
   branding: branding,
-  colorScheme: colorScheme,
 );
 
 /// The custom branding used in the Neon app.
@@ -16,15 +13,10 @@ const branding = Branding(
     width: 100,
     height: 100,
     loader: AssetBytesLoader(
-      'assets/logo.svg.vec',
+      'assets/logo_inverted.svg.vec',
     ),
   ),
   sourceCodeURL: 'https://github.com/nextcloud/neon',
   issueTrackerURL: 'https://github.com/nextcloud/neon/issues',
   legalese: 'Copyright © 2024, provokateurin\nUnder GPLv3 license',
 );
-
-/// The custom color scheme used in the Neon app.
-const colorScheme = NeonColorScheme(
-  primary: Color(0xFFF37736),
-);

packages/neon_framework/example/web/manifest.json

@@ -3,8 +3,8 @@
     "short_name": "Neon",
     "start_url": ".",
     "display": "standalone",
-    "background_color": "#f37736",
-    "theme_color": "#f37736",
+    "background_color": "#0082c9",
+    "theme_color": "#0082c9",
     "description": "A beautiful convergent cross-platform client for Nextcloud written in Flutter.",
     "orientation": "portrait-primary",
     "prefer_related_applications": false,

tool/generate-assets.sh

@@ -2,7 +2,7 @@
 set -euxo pipefail
 cd "$(dirname "$0")/.."
 
-color="#f37736"
+color="#0082c9"
 
 rm -rf /tmp/nextcloud-neon
 mkdir -p /tmp/nextcloud-neon
@@ -19,33 +19,42 @@ function copy_app_svg() {
     echo "Can not find icon for $id in $path"
     exit 1
   fi
-  sed -i "s/fill=\"#[^\"]*\"/fill=\"$color\"/g" "$target"
+  sed -i "s/fill=\"#[^\"]*\"/fill=\"white\"/g" "$target"
+  sed -i "s/<svg /<svg style=\"background-color: $color\" /g" "$target"
 }
 
-function export_icon() {
-    source="$1"
-    size="$2"
-    destination="$3"
-    inkscape "$source" -o "$destination" -w "$size" -h "$size"
-}
-
-function export_mipmap_icon() {
+function generate_android_icon_dpi() {
     source="$1"
     size="$2"
     name="$3"
     dpi="$4"
-    export_icon "$source" "$size" "android/app/src/main/res/mipmap-${dpi}dpi/$name.png"
+    inkscape "$source" -o "android/app/src/main/res/mipmap-${dpi}dpi/$name.png" -w "$size" -h "$size" --actions="export-background:$color"
+    inkscape "$source" -o "android/app/src/main/res/drawable-${dpi}dpi/${name}_outline.png" -w "$size" -h "$size"
 }
 
-function export_mipmap_icon_all() {
+function generate_android_adaptive_icon() {
+  icon="$1"
+  echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>
+<adaptive-icon xmlns:android=\"http://schemas.android.com/apk/res/android\">
+    <background android:drawable=\"@drawable/background_gradient\"/>
+    <foreground>
+        <inset android:drawable=\"@drawable/${icon}_outline\" android:inset=\"25%\"/>
+    </foreground>
+    <monochrome>
+        <inset android:drawable=\"@drawable/${icon}_outline\" android:inset=\"25%\"/>
+    </monochrome>
+</adaptive-icon>" > "android/app/src/main/res/mipmap-anydpi-v26/${icon}.xml"
+}
+
+function generate_android_icon() {
     source="$1"
     name="$2"
-    export_mipmap_icon "$source" 72  "$name" h    &
-    export_mipmap_icon "$source" 48  "$name" m    &
-    export_mipmap_icon "$source" 96  "$name" xh   &
-    export_mipmap_icon "$source" 144 "$name" xxh  &
-    export_mipmap_icon "$source" 192 "$name" xxxh &
-    wait
+    generate_android_icon_dpi "$source" 72  "$name" h
+    generate_android_icon_dpi "$source" 48  "$name" m
+    generate_android_icon_dpi "$source" 96  "$name" xh
+    generate_android_icon_dpi "$source" 144 "$name" xxh
+    generate_android_icon_dpi "$source" 192 "$name" xxxh
+    generate_android_adaptive_icon "$name"
 }
 
 function precompile_assets() {
@@ -54,7 +63,10 @@ function precompile_assets() {
 }
 
 wget https://raw.githubusercontent.com/Templarian/MaterialDesign/master/svg/cable-data.svg -O assets/logo.svg
-sed -i "s/<path /<path fill=\"$color\" /g" assets/logo.svg
+cp assets/logo.svg assets/logo_inverted.svg
+sed -i "s/<path /<path fill=\"white\" /g" assets/logo.svg
+sed -i "s/<svg /<svg style=\"background-color: $color\" /g" assets/logo.svg
+sed -i "s/<path /<path fill=\"$color\" /g" assets/logo_inverted.svg
 
 wget https://raw.githubusercontent.com/nextcloud/promo/master/nextcloud-logo-inverted.svg -O packages/neon_framework/assets/logo_nextcloud.svg
 
@@ -86,27 +98,27 @@ copy_app_svg talk external/nextcloud-spreed
   cd packages/neon_framework/example
 
   cp ../../../assets/logo.svg assets/logo.svg
+  cp ../../../assets/logo_inverted.svg assets/logo_inverted.svg
 
-  # Splash screens
-  inkscape assets/logo.svg -o img/splash_icon.png -w 768 -h 768 # 768px at xxxhdpi is 192dp
-  convert -size 1152x1152 xc:none img/splash_icon.png -gravity center -composite img/splash_icon_android_12.png # 1152px at xxxhdpi is 288dp
-  exiftool -overwrite_original -all= img/splash_icon_android_12.png # To remove timestamps
-
-  # Android launcher icons
-  export_mipmap_icon_all "assets/logo.svg" "ic_launcher" &
+  # Android icons
+  generate_android_icon assets/logo.svg ic_launcher
   for path in ../packages/*_app; do
-    export_mipmap_icon_all "$path/assets/app.svg" "$(basename "$path")" &
+    icon="$(basename "$path")"
+    generate_android_icon "$path/assets/app.svg" "$icon"
   done
-  wait
 
-  export_icon "assets/logo.svg" 192 "web/icons/Icon-192.png"
-  export_icon "assets/logo.svg" 512 "web/icons/Icon-512.png"
-  export_icon "assets/logo.svg"  16 "web/favicon.png"
+  # Web icons
+  inkscape assets/logo_inverted.svg -o web/icons/Icon-192.png -w 192 -h 192
+  inkscape assets/logo_inverted.svg -o web/icons/Icon-512.png -w 512 -h 512
+  inkscape assets/logo_inverted.svg -o web/favicon.png        -w 16  -h 16
 
+  # Splash screens
+  inkscape assets/logo_inverted.svg -o img/splash_icon.png            -w  768 -h  768                                      # 768px at xxxhdpi is 192dp
+  inkscape assets/logo.svg          -o img/splash_icon_android_12.png -w 1152 -h 1152 --actions="export-background:$color" # 1152px at xxxhdpi is 288dp
   fvm dart run flutter_native_splash:create
-  fvm dart run sqflite_common_ffi_web:setup --force
 
   precompile_assets
+  # Restore SVG logo
   cp ../../../assets/logo.svg assets/logo.svg
 )