javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(themes): clean up color values

Browse Source
This commit is contained in:
Adam Bradley
2017-12-21 14:26:16 -06:00
parent 1515437c41
commit 25201d3a74
6 changed files with 62 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/scripts/theme-builder/src/components/css-text/css-text.css
View File

@ -7,8 +7,8 @@ h1 {
textarea { textarea {
margin: 12px 0 0 0; margin: 12px 0 0 0;
min-width: 280px; min-width: 300px;
height: 500px; height: 550px;
font-family: Courier New, Courier, monospace; font-family: Courier New, Courier, monospace;
} }

2
packages/core/scripts/theme-builder/src/components/css-text/css-text.tsx
View File

@ -1,5 +1,5 @@
import { Component, Prop } from '@stencil/core'; import { Component, Prop } from '@stencil/core';
import { STORED_THEME_KEY, deleteCssUrl, getThemeUrl, saveCssUrl } from '../../theme-variables'; import { STORED_THEME_KEY, deleteCssUrl, getThemeUrl, saveCssUrl } from '../helpers';
@Component({ @Component({

55
packages/core/scripts/theme-builder/src/components/helpers.ts Normal file
View File

@ -0,0 +1,55 @@
export const SERVER_DOMAIN = `http://localhost:5454`;
export const DATA_URL = `${SERVER_DOMAIN}/data`;
export const SAVE_CSS_URL = `${SERVER_DOMAIN}/save-css`;
export const DELETE_CSS_URL = `${SERVER_DOMAIN}/delete-css`;
export const CSS_THEME_FILE_PATH = `/src/themes/css`;
export function saveCssUrl(themeName: string, cssText: string) {
cssText = encodeURIComponent(cssText);
return `${SAVE_CSS_URL}?theme=${themeName}&css=${cssText}`;
}
export function deleteCssUrl(themeName: string) {
return `${DELETE_CSS_URL}?theme=${themeName}`;
}
export function getThemeUrl(themeName: string) {
return `${CSS_THEME_FILE_PATH}/${themeName}.css`;
}
export const STORED_DEMO_URL_KEY = 'theme-builder-demo-url';
export const STORED_DEMO_MODE_KEY = 'theme-builder-demo-mode';
export const STORED_THEME_KEY = 'theme-builder-theme-url';
export function cleanCssValue(value: string) {
if (typeof value === 'string') {
value = (value || '').trim().toLowerCase().replace(/ /g, '');
if (value.length) {
if (value.charAt(0) === '#') {
return cleanHexValue(value);
}
if (value.charAt(0) === 'r') {
return cleanRgb(value);
}
}
}
return '';
}
function cleanHexValue(value: string) {
return '#' + value.substr(1).split('').map(c => {
return /[a-f]|[0-9]/.test(c) ? c : '';
}).join('').substr(0, 6);
}
function cleanRgb(value: string) {
return value.split('').map(c => {
return /[rgba0-9\,\.\(\)]/.test(c) ? c : '';
}).join('');
}

2
packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.tsx
View File

@ -1,5 +1,5 @@
import { Component, Listen, State } from '@stencil/core'; import { Component, Listen, State } from '@stencil/core';
import { DATA_URL, STORED_DEMO_MODE_KEY, STORED_DEMO_URL_KEY } from '../../theme-variables'; import { DATA_URL, STORED_DEMO_MODE_KEY, STORED_DEMO_URL_KEY } from '../helpers';
@Component({ @Component({

5
packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx
View File

@ -1,5 +1,6 @@
import { Component, Event, EventEmitter, Listen, Prop, State } from '@stencil/core'; import { Component, Event, EventEmitter, Listen, Prop, State } from '@stencil/core';
import { STORED_THEME_KEY, THEME_VARIABLES, getThemeUrl } from '../../theme-variables'; import { STORED_THEME_KEY, cleanCssValue, getThemeUrl } from '../helpers';
import { THEME_VARIABLES } from '../../theme-variables';
@Component({ @Component({
@ -71,7 +72,7 @@ export class ThemeSelector {
c.push(':root {'); c.push(':root {');
this.themeVariables.forEach(themeVariable => { this.themeVariables.forEach(themeVariable => {
themeVariable.value = (themeVariable.value || '').trim(); themeVariable.value = cleanCssValue(themeVariable.value);
c.push(` ${themeVariable.property}: ${themeVariable.value};`); c.push(` ${themeVariable.property}: ${themeVariable.value};`);
}); });

23
packages/core/scripts/theme-builder/src/theme-variables.ts
View File

@ -84,26 +84,3 @@ export const THEME_VARIABLES = [
}, },
]; ];
export const SERVER_DOMAIN = `http://localhost:5454`;
export const DATA_URL = `${SERVER_DOMAIN}/data`;
export const SAVE_CSS_URL = `${SERVER_DOMAIN}/save-css`;
export const DELETE_CSS_URL = `${SERVER_DOMAIN}/delete-css`;
export const CSS_THEME_FILE_PATH = `/src/themes/css`;
export function saveCssUrl(themeName: string, cssText: string) {
cssText = encodeURIComponent(cssText);
return `${SAVE_CSS_URL}?theme=${themeName}&css=${cssText}`;
}
export function deleteCssUrl(themeName: string) {
return `${DELETE_CSS_URL}?theme=${themeName}`;
}
export function getThemeUrl(themeName: string) {
return `${CSS_THEME_FILE_PATH}/${themeName}.css`;
}
export const STORED_DEMO_URL_KEY = 'theme-builder-demo-url';
export const STORED_DEMO_MODE_KEY = 'theme-builder-demo-mode';
export const STORED_THEME_KEY = 'theme-builder-theme-url';