From 24ec7e832b63ff8ec24b6adf89389f86872d7bdb Mon Sep 17 00:00:00 2001 From: Shawn Goulet Date: Fri, 22 Mar 2024 13:25:20 -0400 Subject: [PATCH] Add demo theme. (#9) --- .github/workflows/build-app.yml | 2 + apps/0/config.json | 2 +- themes/demo-theme/README.md | 61 + themes/demo-theme/manifest.json | 20 + themes/demo-theme/style.ts | 49 + themes/demo-theme/thumbnail.png | Bin 0 -> 2377 bytes themes/demo-theme/translations/default.ts | 3 + themes/demo-theme/translations/zh-cn.js | 3 + themes/demo-theme/variables.json | 1527 +++++++++++++++++++++ 9 files changed, 1666 insertions(+), 1 deletion(-) create mode 100644 themes/demo-theme/README.md create mode 100644 themes/demo-theme/manifest.json create mode 100644 themes/demo-theme/style.ts create mode 100644 themes/demo-theme/thumbnail.png create mode 100644 themes/demo-theme/translations/default.ts create mode 100644 themes/demo-theme/translations/zh-cn.js create mode 100644 themes/demo-theme/variables.json diff --git a/.github/workflows/build-app.yml b/.github/workflows/build-app.yml index 0114ad46..9a8aa66b 100644 --- a/.github/workflows/build-app.yml +++ b/.github/workflows/build-app.yml @@ -21,6 +21,8 @@ jobs: run: unzip -q exb.zip -d exb - name: Copy Custom Widgets run: cp -r widgets/* exb/ArcGISExperienceBuilder/client/your-extensions/widgets + - name: Copy Custom Themes + run: cp -r themes/* exb/ArcGISExperienceBuilder/client/your-extensions/themes - name: Create App directory run: mkdir public && cd public && mkdir apps && cd apps working-directory: exb/ArcGISExperienceBuilder/server diff --git a/apps/0/config.json b/apps/0/config.json index 0176afbc..11464f6e 100644 --- a/apps/0/config.json +++ b/apps/0/config.json @@ -991,7 +991,7 @@ }, "exbVersion": "1.10.0", "mainSizeMode": "LARGE", - "theme": "themes/default/", + "theme": "themes/demo-theme/", "forBuilderAttributes": { "lockLayout": false }, diff --git a/themes/demo-theme/README.md b/themes/demo-theme/README.md new file mode 100644 index 00000000..860e2818 --- /dev/null +++ b/themes/demo-theme/README.md @@ -0,0 +1,61 @@ +# Sample theme + +This sample contains the minimal required files to create a custom theme. + +## How to use the sample + +Clone the [sample repo](https://github.com/esri/arcgis-experience-builder-sdk-resources) and copy this theme's folder (within `themes`) to the `client/your-extensions/themes` folder of your Experience Builder installation. + +## How it works + +When a custom theme is selected, the theme manager from the Jimu framework will read the custom variables in the `variables.json` and merge them with the default ones to create a new variables object at runtime. The variables object is then applied to the style modules (including the custom ones from `style.ts`) to dynamically generate CSS style sheets. + +### Override theme variables + +The `variables.json` file in the sample theme folder contains all variables from the default theme, which can be overridden with different values. + +A simple example: + +```json +{ + "colors": { + "primary": "red" + }, + "typography": { + "fontFamilyBase": "Impact, Arial", + "fontSizeBase": "1rem" + } +} +``` + +> NOTE: In order to have your theme customization to be reflected correct, please remove any unchanged variables from the demo `variables.json` file to avoid unneeded theme overrides. + +### Style Modules + +Any custom CSS styles can be added inside of the `style.ts` file. + +Global styles can be added to the `globalStyles` function and exported as a module with the name of "Global". + +Styles for UI components can be added the same way: wrap the CSS in a function and export it as a module with the same name as the component. For example, the `buttonStyles` function is exported as "Button" in the sample `style.ts` file. + +Uncomment the code inside of `style.ts` to see examples. + +### Localization + +Themes support localization files to provide translation texts for different locales to use, such as `_themeLabel` used by the theme setting panel in the builder to display the name of the theme. + +Register supported locales in the `manifest.json` as: + +``` json + "translatedLocales": [ + "en", + "ar", + "zh-cn" + ] +``` + +Each locale needs to have a supporting translation file added under the `/translations` directory named as `{locale}.js`, except for "en", which has its file named `default.ts`. + +For example, the "ar" locale should have an `ar.js` file in the `/translations` folder. + +Then add and edit the text in each locale file, such as the `_themeLabel` string mentioned above. diff --git a/themes/demo-theme/manifest.json b/themes/demo-theme/manifest.json new file mode 100644 index 00000000..726dbc59 --- /dev/null +++ b/themes/demo-theme/manifest.json @@ -0,0 +1,20 @@ +{ + "name": "demo-theme", + "label": "Demo Theme", + "type": "theme", + "thumbnails ": [], + "font": { + "fontFamily": "Avenir Next", + "color": "#484848" + }, + "version": "1.13.0", + "exbVersion": "1.13.0", + "author": "Esri R&D Center Beijing", + "description": "This is a demo theme containing all customizable theme variables.", + "copyright": "", + "license": "http://www.apache.org/licenses/LICENSE-2.0", + "translatedLocales": [ + "en", + "zh-cn" + ] +} \ No newline at end of file diff --git a/themes/demo-theme/style.ts b/themes/demo-theme/style.ts new file mode 100644 index 00000000..48df0faf --- /dev/null +++ b/themes/demo-theme/style.ts @@ -0,0 +1,49 @@ +/** + Licensing + + Copyright 2020 Esri + + Licensed under the Apache License, Version 2.0 (the "License"); You + may not use this file except in compliance with the License. You may + obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied. See the License for the specific language governing + permissions and limitations under the License. + + A copy of the license is available in the repository's + LICENSE file. +*/ + +/* +* Sample code: +* Uncomment the following sections to add: +* 1. global style: import the Roboto font from external url. +* 2. Button component style override: font size change for all Button components. +*/ + +// import { css, IMThemeVariables } from 'jimu-core'; + +// const globalStyles = () => { +// return css` +// /* Change the "fontFamilyBase" property in variables.json to "Roboto" +// * to use this font. +// */ +// @import url("https://fonts.googleapis.com/css?family=Roboto"); +// ` +// }; + +// const buttonStyles = (props) => { +// const theme: IMThemeVariables = props.theme; +// return css` +// font-size: ${theme?.typography.sizes.display3}; +// ` +// }; + +// // global styles +// export { globalStyles as Global}; +// // Button component styles +// export { buttonStyles as Button}; \ No newline at end of file diff --git a/themes/demo-theme/thumbnail.png b/themes/demo-theme/thumbnail.png new file mode 100644 index 0000000000000000000000000000000000000000..c0e7ba0a9668b096e5bf16811d15f927e0df9c7b GIT binary patch literal 2377 zcmeHJO^X~w7_LoNFdG7aAVft{bQBcruj-lE=^~xD=~=S__Bw0^v)-(!u9<0ex~tP& zlbP95$VtJICz18!RRqr-q9Ecy%te2OsNhx1Tl3LuB!1=OVH=9Bu6pYIcK}=&^=AI=YC^I!?O#YCn2| za+z8zmOWuj(;UzUUAZ>R89xvT_rxH{0^{c|?i)CX1LIaba-uvG!(`{M5H}BZyZrEg z`>}EDD!wwMU?3HW;b}U`N;(aUxm^l#y=)tJ4p9ezv85g2{iuUOSqNOW8YXvZb-d|Y zZo{kj{;QZcZqs&}w(FU0gVr2M2wpx0cq`&Q-D|zR^aWpmF;pt2wmq3ltchpIVqm+z z@7oTs2{8d-ma|N;shO3RR~A~L&Qb_a4Y*sF50>bPm%Wcuhow7J?~Rbfp}vE~>K%8Hb_17$3hBF`i^PkC%^~ z5-p}gU}%Kt64Uj&giwc2Qa7C@b({q>l5x_Xt)Rp)9b%GtmpIh(C}}(b1>M9tJ<0 z{*UM1EE1?gHhN+^x;nLh=uT3?)y|gnb5q=2&PEBIYlbqeYauYW7J-P3<#O`G3@pq} zh60TKjV>0jQuft^6=G`uZ2dd&*^q&)OLvis{pURAd&kOr1&7|Dr&ZH}kE-p740>Gw zP3@E3eS*;G2kq8YcY5^G4_}=@`23g7_>Yetytr}ig$uv^7eAAWx7>-V3={ZEm5vUS47i8lT>