-
Notifications
You must be signed in to change notification settings - Fork 988
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat!(icons): Allow a lot more control over icon assignment
Ironically, this also allows most people to drastically simplify their icons by only providing a single 1024⨉1024 image with no special attributes. Closes GH-592. Closes GH-623. Closes GH-657. Closes GH-658. Closes GH-1019. Closes GH-1233. Closes GH-1387.
- Loading branch information
Showing
46 changed files
with
896 additions
and
205 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -363,58 +363,169 @@ function handleBuildSettings (platformConfig, locations, infoPlist) { | |
} | ||
|
||
function mapIconResources (icons, iconsDir) { | ||
// See https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html | ||
// for launch images sizes reference. | ||
// Ref: https://developer.apple.com/design/human-interface-guidelines/app-icons | ||
// These are ordered according to how Xcode puts them in the Contents.json file | ||
const platformIcons = [ | ||
{ dest: 'icon-20.png', width: 20, height: 20 }, | ||
// iOS fallback icon sizes | ||
{ dest: '[email protected]', width: 40, height: 40 }, | ||
{ dest: '[email protected]', width: 60, height: 60 }, | ||
{ dest: 'icon-40.png', width: 40, height: 40 }, | ||
{ dest: '[email protected]', width: 80, height: 80 }, | ||
{ dest: 'icon-50.png', width: 50, height: 50 }, | ||
{ dest: '[email protected]', width: 100, height: 100 }, | ||
{ dest: '[email protected]', width: 58, height: 58 }, | ||
{ dest: '[email protected]', width: 87, height: 87 }, | ||
{ dest: '[email protected]', width: 72, height: 72 }, | ||
{ dest: '[email protected]', width: 144, height: 144 }, | ||
{ dest: '[email protected]', width: 80, height: 80, target: 'spotlight' }, | ||
{ dest: '[email protected]', width: 120, height: 120, target: 'spotlight' }, | ||
{ dest: '[email protected]', width: 120, height: 120 }, | ||
{ dest: '[email protected]', width: 180, height: 180 }, | ||
{ dest: 'icon-72.png', width: 72, height: 72 }, | ||
{ dest: 'icon-72@2x.png', width: 144, height: 144 }, | ||
{ dest: 'icon-76.png', width: 76, height: 76 }, | ||
{ dest: 'icon-64@2x.png', width: 128, height: 128 }, | ||
{ dest: 'icon-64@3x.png', width: 196, height: 196 }, | ||
{ dest: 'icon-68@2x.png', width: 136, height: 136 }, | ||
{ dest: '[email protected]', width: 152, height: 152 }, | ||
{ dest: '[email protected]', width: 167, height: 167 }, | ||
{ dest: 'icon-1024.png', width: 1024, height: 1024 }, | ||
{ dest: 'icon-29.png', width: 29, height: 29 }, | ||
{ dest: '[email protected]', width: 58, height: 58 }, | ||
{ dest: '[email protected]', width: 87, height: 87 }, | ||
{ dest: 'icon.png', width: 57, height: 57 }, | ||
{ dest: '[email protected]', width: 114, height: 114 }, | ||
{ dest: '[email protected]', width: 48, height: 48 }, | ||
{ dest: '[email protected]', width: 55, height: 55 }, | ||
{ dest: '[email protected]', width: 88, height: 88 }, | ||
{ dest: '[email protected]', width: 172, height: 172 }, | ||
{ dest: '[email protected]', width: 196, height: 196 } | ||
|
||
// Default iOS icon | ||
{ dest: 'icon.png', width: 1024, height: 1024, useDefault: true }, | ||
|
||
// macOS icon sizes | ||
{ dest: 'mac-16.png', width: 16, height: 16, target: 'mac' }, | ||
{ dest: '[email protected]', width: 32, height: 32, target: 'mac' }, | ||
{ dest: 'mac-32.png', width: 32, height: 32, target: 'mac' }, | ||
{ dest: '[email protected]', width: 64, height: 64, target: 'mac' }, | ||
{ dest: 'mac-128.png', width: 128, height: 128, target: 'mac' }, | ||
{ dest: '[email protected]', width: 256, height: 256, target: 'mac' }, | ||
{ dest: 'mac-256.png', width: 256, height: 256, target: 'mac' }, | ||
{ dest: '[email protected]', width: 512, height: 512, target: 'mac' }, | ||
{ dest: 'mac-512.png', width: 512, height: 512, target: 'mac' }, | ||
{ dest: '[email protected]', width: 1024, height: 1024, target: 'mac' }, | ||
|
||
// WatchOS fallback icon sizes | ||
{ dest: '[email protected]', width: 44, height: 44, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 48, height: 48, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 55, height: 55, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 58, height: 58, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 60, height: 60, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 64, height: 64, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 66, height: 66, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 80, height: 80, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 87, height: 87, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 88, height: 88, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 92, height: 92, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 100, height: 100, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 102, height: 102, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 108, height: 108, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 172, height: 172, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 196, height: 196, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 216, height: 216, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 234, height: 234, target: 'watchos' }, | ||
{ dest: '[email protected]', width: 258, height: 258, target: 'watchos' }, | ||
|
||
// Allow customizing the watchOS icon with target="watchos" | ||
// This falls back to using the iOS app icon by default | ||
{ dest: 'watchos.png', width: 1024, height: 1024, target: 'watchos', useDefault: true } | ||
]; | ||
|
||
const pathMap = {}; | ||
|
||
function getDefaultIconForTarget (target) { | ||
const def = icons.filter(res => !res.width && !res.height && !res.target).pop(); | ||
|
||
if (target) { | ||
return icons | ||
.filter(res => res.target === target) | ||
.filter(res => !res.width && !res.height) | ||
.pop() || def; | ||
} | ||
|
||
return def; | ||
} | ||
|
||
function getIconBySizeAndTarget (width, height, target) { | ||
return icons | ||
.filter(res => res.target === target) | ||
.find(res => | ||
(res.width || res.height) && | ||
(!res.width || (width === res.width)) && | ||
(!res.height || (height === res.height)) | ||
) || null; | ||
} | ||
|
||
platformIcons.forEach(item => { | ||
const icon = icons.getBySize(item.width, item.height) || icons.getDefault(); | ||
const dest = path.join(iconsDir, item.dest); | ||
let icon = getIconBySizeAndTarget(item.width, item.height, item.target); | ||
|
||
if (!icon && item.target === 'spotlight') { | ||
// Fall back to a non-targeted icon | ||
icon = getIconBySizeAndTarget(item.width, item.height); | ||
} | ||
|
||
if (!icon && item.useDefault) { | ||
if (item.target) { | ||
icon = getIconBySizeAndTarget(item.width, item.height); | ||
} | ||
|
||
const defaultIcon = getDefaultIconForTarget(item.target); | ||
if (!icon && defaultIcon) { | ||
icon = defaultIcon; | ||
} | ||
} | ||
|
||
if (icon) { | ||
const target = path.join(iconsDir, item.dest); | ||
pathMap[target] = icon.src; | ||
if (icon.src) { | ||
pathMap[dest] = icon.src; | ||
} | ||
|
||
// Only iOS has dark/tinted icon variants | ||
if (!item.target || item.target === 'spotlight') { | ||
if (icon.monochrome) { | ||
pathMap[dest.replace('.png', '-tinted.png')] = icon.monochrome; | ||
} | ||
|
||
if (icon.foreground) { | ||
pathMap[dest.replace('.png', '-dark.png')] = icon.foreground; | ||
} | ||
} | ||
} | ||
}); | ||
|
||
return pathMap; | ||
} | ||
|
||
function getIconsDir (projectRoot, platformProjDir) { | ||
let iconsDir; | ||
const xcassetsExists = folderExists(path.join(projectRoot, platformProjDir, 'Assets.xcassets')); | ||
function generateAppIconContentsJson (resourceMap) { | ||
const contentsJSON = { | ||
images: [], | ||
info: { | ||
author: 'xcode', | ||
version: 1 | ||
} | ||
}; | ||
|
||
if (xcassetsExists) { | ||
iconsDir = path.join(platformProjDir, 'Assets.xcassets', 'AppIcon.appiconset'); | ||
} else { | ||
iconsDir = path.join(platformProjDir, 'Resources', 'icons'); | ||
} | ||
Object.keys(resourceMap).forEach(res => { | ||
const [filename, platform, size, scale, variant] = path.basename(res).match(/([A-Za-z]+)(?:-([0-9.]+)(?:@([0-9.]x))?)?(?:-([a-z]+))?\.png/); | ||
|
||
const entry = { | ||
filename, | ||
idiom: 'universal', | ||
platform: (platform === 'icon') ? 'ios' : platform, | ||
size: `${size ?? 1024}x${size ?? 1024}` | ||
}; | ||
|
||
return iconsDir; | ||
if (scale) { | ||
entry.scale = scale; | ||
} | ||
|
||
if (variant) { | ||
entry.appearances = [ | ||
{ | ||
appearance: 'luminosity', | ||
value: variant | ||
} | ||
]; | ||
} | ||
|
||
contentsJSON.images.push(entry); | ||
}); | ||
|
||
return contentsJSON; | ||
} | ||
|
||
function updateIcons (cordovaProject, locations) { | ||
|
@@ -426,18 +537,24 @@ function updateIcons (cordovaProject, locations) { | |
} | ||
|
||
const platformProjDir = path.relative(cordovaProject.root, locations.xcodeCordovaProj); | ||
const iconsDir = getIconsDir(cordovaProject.root, platformProjDir); | ||
const iconsDir = path.join(platformProjDir, 'Assets.xcassets', 'AppIcon.appiconset'); | ||
const resourceMap = mapIconResources(icons, iconsDir); | ||
events.emit('verbose', `Updating icons at ${iconsDir}`); | ||
FileUpdater.updatePaths( | ||
resourceMap, { rootDir: cordovaProject.root }, logFileOp); | ||
|
||
// Now we need to update the AppIcon.appiconset/Contents.json file | ||
const contentsJSON = generateAppIconContentsJson(resourceMap); | ||
|
||
events.emit('verbose', 'Updating App Icon image set contents.json'); | ||
fs.writeFileSync(path.join(cordovaProject.root, iconsDir, 'Contents.json'), JSON.stringify(contentsJSON, null, 2)); | ||
} | ||
|
||
function cleanIcons (projectRoot, projectConfig, locations) { | ||
const icons = projectConfig.getIcons('ios'); | ||
if (icons.length > 0) { | ||
const platformProjDir = path.relative(projectRoot, locations.xcodeCordovaProj); | ||
const iconsDir = getIconsDir(projectRoot, platformProjDir); | ||
const iconsDir = path.join(platformProjDir, 'Assets.xcassets', 'AppIcon.appiconset'); | ||
const resourceMap = mapIconResources(icons, iconsDir); | ||
Object.keys(resourceMap).forEach(targetIconPath => { | ||
resourceMap[targetIconPath] = null; | ||
|
@@ -447,6 +564,16 @@ function cleanIcons (projectRoot, projectConfig, locations) { | |
// Source paths are removed from the map, so updatePaths() will delete the target files. | ||
FileUpdater.updatePaths( | ||
resourceMap, { rootDir: projectRoot, all: true }, logFileOp); | ||
|
||
const contentsJSON = generateAppIconContentsJson(resourceMap); | ||
|
||
// delete filename from contents.json | ||
contentsJSON.images.forEach(image => { | ||
image.filename = undefined; | ||
}); | ||
|
||
events.emit('verbose', 'Updating App Icon image set contents.json'); | ||
fs.writeFileSync(path.join(projectRoot, iconsDir, 'Contents.json'), JSON.stringify(contentsJSON, null, 2)); | ||
} | ||
} | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<?xml version='1.0' encoding='utf-8'?> | ||
<widget android-packageName="io.cordova.hellocordova.android" id="io.cordova.hellocordova" ios-CFBundleIdentifier="io.cordova.hellocordova.ios" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> | ||
<name>Hello Cordova</name> | ||
<description> | ||
A sample Apache Cordova application that responds to the deviceready event. | ||
</description> | ||
<author email="[email protected]" href="http://cordova.io"> | ||
Apache Cordova Team | ||
</author> | ||
<content src="index.html" /> | ||
|
||
<platform name="ios"> | ||
<preference name="orientation" value="all" /> | ||
<preference name="target-device" value="handset" /> | ||
<preference name="deployment-target" value="13.0" /> | ||
|
||
<icon src="res/ios/[email protected]" height="40" width="40" /> | ||
<icon src="res/ios/[email protected]" height="60" width="60" /> | ||
<icon src="res/ios/[email protected]" height="58" width="58" /> | ||
<icon src="res/ios/[email protected]" height="87" width="87" /> | ||
<icon src="res/ios/[email protected]" height="72" width="72" /> | ||
<icon src="res/ios/[email protected]" height="144" width="144" /> | ||
<icon src="res/ios/[email protected]" height="80" width="80" target="spotlight" /> | ||
<icon src="res/ios/[email protected]" height="120" width="120" target="spotlight" /> | ||
<icon src="res/ios/[email protected]" height="120" width="120" /> | ||
<icon src="res/ios/[email protected]" height="180" width="180" /> | ||
<icon src="res/ios/[email protected]" height="128" width="128" /> | ||
<icon src="res/ios/[email protected]" height="196" width="196" /> | ||
<icon src="res/ios/[email protected]" height="136" width="136" /> | ||
<icon src="res/ios/[email protected]" height="152" width="152" /> | ||
<icon src="res/ios/[email protected]" height="167" width="167" /> | ||
<icon src="res/ios/[email protected]" height="1024" width="1024" /> | ||
</platform> | ||
|
||
<access origin="http://*.apache.org" /> | ||
<access origin="https://*.apache.org" /> | ||
|
||
<allow-navigation href="http://*.apache.org" /> | ||
<allow-navigation href="https://*.apache.org" /> | ||
|
||
</widget> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
<?xml version='1.0' encoding='utf-8'?> | ||
<widget android-packageName="io.cordova.hellocordova.android" id="io.cordova.hellocordova" ios-CFBundleIdentifier="io.cordova.hellocordova.ios" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> | ||
<name>Hello Cordova</name> | ||
<description> | ||
A sample Apache Cordova application that responds to the deviceready event. | ||
</description> | ||
<author email="[email protected]" href="http://cordova.io"> | ||
Apache Cordova Team | ||
</author> | ||
<content src="index.html" /> | ||
|
||
<platform name="ios"> | ||
<preference name="orientation" value="all" /> | ||
<preference name="target-device" value="handset" /> | ||
<preference name="deployment-target" value="13.0" /> | ||
</platform> | ||
|
||
<access origin="http://*.apache.org" /> | ||
<access origin="https://*.apache.org" /> | ||
|
||
<allow-navigation href="http://*.apache.org" /> | ||
<allow-navigation href="https://*.apache.org" /> | ||
|
||
</widget> |
27 changes: 27 additions & 0 deletions
27
tests/spec/unit/fixtures/icon-support/configs/single-only.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<?xml version='1.0' encoding='utf-8'?> | ||
<widget android-packageName="io.cordova.hellocordova.android" id="io.cordova.hellocordova" ios-CFBundleIdentifier="io.cordova.hellocordova.ios" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> | ||
<name>Hello Cordova</name> | ||
<description> | ||
A sample Apache Cordova application that responds to the deviceready event. | ||
</description> | ||
<author email="[email protected]" href="http://cordova.io"> | ||
Apache Cordova Team | ||
</author> | ||
<content src="index.html" /> | ||
|
||
<platform name="ios"> | ||
<preference name="orientation" value="all" /> | ||
<preference name="target-device" value="handset" /> | ||
<preference name="deployment-target" value="13.0" /> | ||
|
||
<icon src="res/ios/appicon.png" /> | ||
</platform> | ||
|
||
<access origin="http://*.apache.org" /> | ||
<access origin="https://*.apache.org" /> | ||
|
||
<allow-navigation href="http://*.apache.org" /> | ||
<allow-navigation href="https://*.apache.org" /> | ||
|
||
</widget> | ||
|
27 changes: 27 additions & 0 deletions
27
tests/spec/unit/fixtures/icon-support/configs/single-variants.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<?xml version='1.0' encoding='utf-8'?> | ||
<widget android-packageName="io.cordova.hellocordova.android" id="io.cordova.hellocordova" ios-CFBundleIdentifier="io.cordova.hellocordova.ios" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> | ||
<name>Hello Cordova</name> | ||
<description> | ||
A sample Apache Cordova application that responds to the deviceready event. | ||
</description> | ||
<author email="[email protected]" href="http://cordova.io"> | ||
Apache Cordova Team | ||
</author> | ||
<content src="index.html" /> | ||
|
||
<platform name="ios"> | ||
<preference name="orientation" value="all" /> | ||
<preference name="target-device" value="handset" /> | ||
<preference name="deployment-target" value="13.0" /> | ||
|
||
<icon src="res/ios/appicon.png" foreground="res/ios/appicon-dark.png" monochrome="res/ios/appicon-tint.png" /> | ||
</platform> | ||
|
||
<access origin="http://*.apache.org" /> | ||
<access origin="https://*.apache.org" /> | ||
|
||
<allow-navigation href="http://*.apache.org" /> | ||
<allow-navigation href="https://*.apache.org" /> | ||
|
||
</widget> | ||
|
Oops, something went wrong.