Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

refactor global style split & removal

1) Removed page-global CSS from 'widgets.GlobalStyle' and extracted
some of it into 'templates.LegacyGeneralStyle', which is automatically
loaded for backward compatibility in templates when AriaSkin is available.

2) "aria.widgets.GlobalStyle" is loaded only when widgets are present.

3) Removed skin from bootstrap.js. Added skin in attester config instead.

4) In AriaSkinBeans: renamed "GeneralCfg" to "PageGeneralCfg"; removed some
deprecated items from it; created "WidgetGeneralCfg" being subset of
"PageGeneralCfg" to be able to separate font settings for widgets from
font settings for the page in general. This followed some changes in
skin normalization.
  • Loading branch information...
commit 59e9ba72a65c810df7935c5a1a4195365e44d233 1 parent f44de2f
@jakub-g authored divdavem committed
View
7 src/aria/bootstrap.js
@@ -123,12 +123,9 @@
'aria/core/environment/EnvironmentBase.js', 'aria/core/environment/Environment.js',
// resource manager
- 'aria/core/ResMgr.js', 'aria/utils/Profiling.js',
-
- // Skin
- 'aria/css/atskin.js'];
+ 'aria/core/ResMgr.js', 'aria/utils/Profiling.js'];
for (var i = 0; coreScripts.length > i; i++) {
loadScript(coreScripts[i]);
}
-})();
+})();
View
5 src/aria/core/TplClassLoader.js
@@ -149,7 +149,10 @@
classes.push("aria.templates.ModuleCtrlFactory", moduleCtrl.classpath);
}
- var cssToReload = ['aria.templates.GlobalStyle', 'aria.widgets.GlobalStyle'];
+ var cssToReload = ['aria.templates.GlobalStyle'];
+ if (aria.widgets.AriaSkin) {
+ cssToReload.push('aria.templates.LegacyGeneralStyle');
+ }
if (cfg.reload) {
aria.templates.TemplateManager.unloadTemplate(cfg.classpath, cfg.reloadByPassCache);
if (aria.templates.CSSMgr) {
View
6 src/aria/templates/BaseCtxt.js
@@ -202,9 +202,11 @@ Aria.classDefinition({
__disposeLibs : function (libs) {
for (var i = 0; i < libs.length; i++) {
var lib = libs[i];
- aria.templates.ITemplate.prototype.$destructor.call(lib._tpl);
+ if (aria.templates.ITemplate) {
+ aria.templates.ITemplate.prototype.$destructor.call(lib._tpl);
+ }
lib.$dispose();
}
}
}
-});
+});
View
11 src/aria/templates/CSSMgr.js
@@ -373,12 +373,9 @@ Aria.classDefinition({
delete this.__invalidClasspaths[cssClasspath];
var cssCtxt = aria.templates.CSSCtxtManager.getContext(cssClasspath, contextArgs);
- if (cssClasspath == "aria.templates.GlobalStyle") {
- // Give a prefix to the Global file in order to have higher priority
- this.__getPrefix(cssClasspath);
- }
- if (cssClasspath == "aria.widgets.GlobalStyle") {
- // Give a prefix to the Global file in order to have higher priority
+ // Give a prefix to the Global file in order to have higher priority
+ if (cssClasspath == "aria.templates.GlobalStyle" || cssClasspath == "aria.templates.LegacyGeneralStyle"
+ || cssClasspath == "aria.widgets.GlobalStyle") {
this.__getPrefix(cssClasspath);
}
if (cssCtxt.doPrefixing()) {
@@ -788,4 +785,4 @@ Aria.classDefinition({
return invalidClasspaths;
}
}
-});
+});
View
47 src/aria/templates/LegacyGeneralStyle.tpl.css
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2013 Amadeus s.a.s.
+ * 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.
+ */
+
+{CSSTemplate {
+ $classpath : "aria.templates.LegacyGeneralStyle",
+ $dependencies : ["aria.widgets.AriaSkinInterface"],
+ $csslibs : {
+ text : "aria.widgets.TextStyle"
+ }
+}}
+
+{macro main()}
+ {var general = aria.widgets.AriaSkinInterface.getGeneral() /}
+ {call writeGeneralStyle(general) /}
+{/macro}
+
+{macro writeGeneralStyle(general)}
+ {if general.font}
+ body, textarea, select, input, button, table {
+ {call text.writeFontStyleInner(general.font) /}
+ }
+ {/if}
+
+ {if general.anchor && general.anchor.states}
+ {call text.writeAnchorsStyle(general.anchor.states) /}
+ {/if}
+
+
+ {if ! general.disable.ul.list.style}
+ ul, li {list-style-type:none;}
+ {/if}
+
+{/macro}
+
+{/CSSTemplate}
View
15 src/aria/templates/TemplateCtxt.js
@@ -169,8 +169,11 @@
aria.templates.CSSMgr.unloadDependencies(this);
if (this._globalCssDepsLoaded) {
// PTR 05086835: only unload the global CSS if it was loaded by this instance
- aria.templates.CSSMgr.unloadWidgetDependencies('aria.templates.Template', [
- 'aria.templates.GlobalStyle', /* BACKWARD-COMPATIBILITY-BEGIN */'aria.widgets.GlobalStyle' /* BACKWARD-COMPATIBILITY-END */]);
+ var deps = ['aria.templates.GlobalStyle'];
+ if (aria.widgets.AriaSkin) {
+ deps.push('aria.templates.LegacyGeneralStyle');
+ }
+ aria.templates.CSSMgr.unloadWidgetDependencies('aria.templates.Template', deps);
this._globalCssDepsLoaded = false;
}
this._cssClasses = null;
@@ -1703,9 +1706,11 @@
if (!classes) {
if (this._cfg.isRootTemplate) {
// PTR 05086835: load the global CSS here, and remember that it was loaded
- aria.templates.CSSMgr.loadWidgetDependencies('aria.templates.Template', [
- 'aria.templates.GlobalStyle', /* BACKWARD-COMPATIBILITY-BEGIN */
- 'aria.widgets.GlobalStyle' /* BACKWARD-COMPATIBILITY-END */]);
+ var deps = ['aria.templates.GlobalStyle'];
+ if (aria.widgets.AriaSkin) {
+ deps.push('aria.templates.LegacyGeneralStyle');
+ }
+ aria.templates.CSSMgr.loadWidgetDependencies('aria.templates.Template', deps);
this._globalCssDepsLoaded = true;
}
// Load the CSS dependencies, the style should be added before the html
View
80 src/aria/widgets/AriaSkinBeans.js
@@ -42,37 +42,66 @@ Aria.beanDefinitions({
$minValue : 0,
$maxValue : 100
},
- "GeneralCfg" : {
+ "WidgetGeneralCfg" : {
$type : "Object",
$description : "",
$properties : {
- "imagesRoot" : {
- $type : "json:String",
- $description : "Root path for skin images (relative to Aria.rootFolderPath). It is supposed to end with a slash.",
- $default : "css/"
- },
"font" : {
$type : "Object",
$description : "",
$properties : {
"size" : {
$type : "Pixels",
- $description : "[Deprecated, please use a CSS file directly] General font size for the application (in pixels)."
+ $description : "Font size inside the widgets (in pixels)."
},
"family" : {
$type : "json:String",
- $description : "[Deprecated, please use a CSS file directly] General font family for the application."
+ $description : "Font family inside the widgets."
+ }
+ }
+ },
+ "anchor" : {
+ $type : "Object",
+ $description : "Settings for anchors inside widgets.",
+ $properties : {
+ "states" : {
+ $type : "StatesSet",
+ $description : "",
+ $properties : {
+ "normal" : {
+ $type : "AnchorState"
+ },
+ "link" : {
+ $type : "AnchorState"
+ },
+ "visited" : {
+ $type : "AnchorState"
+ },
+ "hover" : {
+ $type : "AnchorState"
+ },
+ "focus" : {
+ $type : "AnchorState"
+ }
+ }
}
}
+ }
+ }
+ },
+ "PageGeneralCfg" : {
+ $type : "WidgetGeneralCfg",
+ $description : "",
+ $properties : {
+ "imagesRoot" : {
+ $type : "json:String",
+ $description : "Root path for skin images (relative to Aria.rootFolderPath). It is supposed to end with a slash.",
+ $default : "css/"
},
"colors" : {
$type : "Object",
$description : "General color settings for your application",
$properties : {
- "bkg" : {
- $type : "Color",
- $description : "[Deprecated, please use a CSS file directly] General background color of the application."
- },
"disabled" : {
$type : "Color",
// used in aria.widgets.calendar.CalendarStyle
@@ -132,33 +161,6 @@ Aria.beanDefinitions({
}
}
},
- "anchor" : {
- $type : "Object",
- $description : "[Deprecated, please use a CSS file directly] General settings for anchors.",
- $properties : {
- "states" : {
- $type : "StatesSet",
- $description : "",
- $properties : {
- "normal" : {
- $type : "AnchorState"
- },
- "link" : {
- $type : "AnchorState"
- },
- "visited" : {
- $type : "AnchorState"
- },
- "hover" : {
- $type : "AnchorState"
- },
- "focus" : {
- $type : "AnchorState"
- }
- }
- }
- }
- },
"disable" : {
$type : "Object",
$description : "",
View
24 src/aria/widgets/AriaSkinInterface.js
@@ -105,12 +105,28 @@ Aria.classDefinition({
* normalization function before returning its result.
*/
getGeneral : function () {
- var general = aria.widgets.AriaSkin.skinObject.general;
+ return this._normalizeAndGetGeneral("general", "PageGeneralCfg");
+ },
+
+ /**
+ * Return widget - general skin properties. If those properties are not normalized yet, this function calls the
+ * normalization function before returning its result.
+ */
+ getWidgetGeneral : function () {
+ return this._normalizeAndGetGeneral("widgets", "WidgetGeneralCfg");
+ },
+
+ /**
+ * Helper function to retrieve (and normalize if needed) general or widget-general skin properties.
+ * @param {String} skinObjPropName
+ * @param {String} beanType
+ */
+ _normalizeAndGetGeneral : function (skinObjProp, beanType) {
+ var general = aria.widgets.AriaSkin.skinObject[skinObjProp];
if (!general || !general['aria:skinNormalized']) {
- var newValue = aria.widgets.AriaSkinNormalization.normalizeGeneral(general);
+ var newValue = aria.widgets.AriaSkinNormalization.normalizeGeneral(general, beanType);
if (general != newValue) {
- general = newValue;
- aria.widgets.AriaSkin.skinObject.general = newValue;
+ aria.widgets.AriaSkin.skinObject[skinObjProp] = general = newValue;
}
}
return general;
View
17 src/aria/widgets/AriaSkinNormalization.js
@@ -214,11 +214,14 @@ Aria.classDefinition({
return;
}
for (var widget in skinObject) {
- if (skinObject.hasOwnProperty(widget) && widget != "general") {
+ if (skinObject.hasOwnProperty(widget) && widget != "general" && widget != "widgets") {
skinObject[widget] = this.normalizeWidget(widget, skinObject[widget]);
}
}
- skinObject.general = this.normalizeGeneral(skinObject.general);
+ skinObject.general = this.normalizeGeneral(skinObject.general, "PageGeneralCfg");
+ if (skinObject.widgets) {
+ skinObject.widgets = this.normalizeGeneral(skinObject.widgets, "WidgetGeneralCfg");
+ }
skinObject['aria:skinNormalized'] = true;
return skinObject;
},
@@ -521,12 +524,16 @@ Aria.classDefinition({
/**
* Normalizes the given general skin properties and returns it.
- * @param {aria.widgets.AriaSkinBeans.GeneralCfg} general
+ * @param {aria.widgets.AriaSkinBeans.WidgetsGeneralCfg|PageGeneralCfg} general
+ * @param {String} beanType
*/
- normalizeGeneral : function (general) {
+ normalizeGeneral : function (general, beanType) {
+ if (!general) {
+ general = {};
+ }
var param = {
json : general,
- beanName : "aria.widgets.AriaSkinBeans.GeneralCfg"
+ beanName : "aria.widgets.AriaSkinBeans." + beanType
};
var normalizationResults = this._normalize(param);
if (!normalizationResults.result) {
View
89 src/aria/widgets/GlobalStyle.tpl.css
@@ -16,64 +16,17 @@
{CSSTemplate {
$classpath : "aria.widgets.GlobalStyle",
$dependencies : ["aria.widgets.environment.WidgetSettings","aria.widgets.AriaSkinInterface"],
- $extends: "aria.widgets.WidgetStyle"
+ $extends: "aria.widgets.WidgetStyle",
+ $csslibs : {
+ text : "aria.widgets.TextStyle"
+ }
}}
{macro main()}
{var general = aria.widgets.AriaSkinInterface.getGeneral()/}
+ {var widgetGeneral = aria.widgets.AriaSkinInterface.getWidgetGeneral()/}
/* Note: all private classes start with 'x' - these classes must not be used in application pages as they can change when new features are implemented */
-/* BACKWARD-COMPATIBILITY-BEGIN */
-/* CSS rules added by Aria Templates itself should not impact the whole page */
-
-/* Global classes */
-body, textarea, select, input, button, table {
-{if general.font.size}
- font-size: ${general.font.size}px;
-{/if}
-{if general.font.family}
- font-family: ${general.font.family};
-{/if}
-}
-body {
- padding: 0;
- margin: 0;
- cursor:default;
-{if general.colors.bkg}
- background-color: ${general.colors.bkg};
-{/if}
-}
-
-a {
-{call writeAnchorState(general.anchor.states.normal)/}
-}
-a:link {
-{call writeAnchorState(general.anchor.states.link)/}
-}
-a:visited {
-{call writeAnchorState(general.anchor.states.visited)/}
-}
-a:hover {
-{call writeAnchorState(general.anchor.states.hover)/}
-}
-
-{if ! general.disable.ul.list.style}
-ul, li {list-style-type:none;}
-{/if}
-
-/* Hide input focus on safari*/
-{if aria.core.Browser.isSafari || aria.core.Browser.isChrome}
-*:focus {
- outline: 0;
-}
-{/if}
-
-a:focus {
-{call writeAnchorState(general.anchor.states.focus)/}
-}
-
-/* BACKWARD-COMPATIBILITY-END */
-
.xLDI {
{call background(general.loadingOverlay.backgroundColor, general.loadingOverlay.spriteURL,"no-repeat center center")/}
{call opacity(general.loadingOverlay.opacity)/}
@@ -93,6 +46,20 @@ a:focus {
{if widgetSettings.middleAlignment}vertical-align: middle;{/if}
}
+{if widgetGeneral && widgetGeneral.font}
+.xWidget textarea,
+.xWidget select,
+.xWidget input,
+.xWidget button,
+.xWidget table {
+ {call text.writeFontStyleInner(widgetGeneral.font) /}
+}
+{/if}
+
+{if widgetGeneral && widgetGeneral.anchor && widgetGeneral.anchor.states}
+ {call text.writeAnchorsStyle(widgetGeneral.anchor.states, ".xWidget") /}
+{/if}
+
.xWidget.xBlock, .xBlock {
display: block;
}
@@ -146,20 +113,12 @@ a:focus {
display: none;
}
{/if}
-{/macro}
-/* BACKWARD-COMPATIBILITY-BEGIN */
-{macro writeAnchorState(state)}
-{if state.color}
- color: ${state.color};
-{/if}
-{if state.text.decoration}
- text-decoration: ${state.text.decoration};
-{/if}
-{if state.outline}
- outline: ${state.outline};
+{if aria.core.Browser.isSafari || aria.core.Browser.isChrome}
+*:focus {
+ outline: 0;
+}
{/if}
{/macro}
-/* BACKWARD-COMPATIBILITY-END */
-{/CSSTemplate}
+{/CSSTemplate}
View
62 src/aria/widgets/TextStyle.cml
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2013 Amadeus s.a.s.
+ * 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.
+ */
+
+{CSSLibrary {
+ $classpath: "aria.widgets.TextStyle"
+}}
+
+ {macro writeFontStyleInner(font)}
+ {if font.size}
+ font-size: ${font.size}px;
+ {/if}
+ {if font.family}
+ font-family: ${font.family};
+ {/if}
+ {/macro}
+
+ {macro writeAnchorsStyle(states, prefix)}
+ {set prefix = prefix || "" /}
+ ${prefix} a {
+ {call writeAnchorState(states.normal)/}
+ }
+ ${prefix} a:link {
+ {call writeAnchorState(states.link)/}
+ }
+ ${prefix} a:visited {
+ {call writeAnchorState(states.visited)/}
+ }
+ ${prefix} a:hover {
+ {call writeAnchorState(states.hover)/}
+ }
+ ${prefix} a:focus {
+ {call writeAnchorState(states.focus)/}
+ }
+ {/macro}
+
+ {macro writeAnchorState(state)}
+ {if state}
+ {if state.color}
+ color: ${state.color};
+ {/if}
+ {if state.text.decoration}
+ text-decoration: ${state.text.decoration};
+ {/if}
+ {if state.outline}
+ outline: ${state.outline};
+ {/if}
+ {/if}
+ {/macro}
+
+{/CSSLibrary}
View
8 src/aria/widgets/Widget.js
@@ -28,11 +28,7 @@
$dependencies : ["aria.widgets.CfgBeans", "aria.utils.Json", "aria.utils.Dom", "aria.DomEvent",
"aria.utils.Delegate", "aria.widgets.AriaSkinInterface", "aria.utils.Type",
"aria.templates.RefreshManager"],
- // BACKWARD-COMPATIBILITY-BEGIN
- // The following line should be uncommented when removing the automatic load of this CSS from
- // aria.templates.TemplateCtxt and aria.core.TplClassLoader:
- // $css : ["aria.widgets.GlobalStyle"],
- // BACKWARD-COMPATIBILITY-END
+ $css : ["aria.widgets.GlobalStyle"],
$onload : function () {
delegateManager = aria.utils.Delegate;
jsonUtils = aria.utils.Json;
@@ -756,4 +752,4 @@
}
}
});
-})();
+})();
View
14 src/aria/widgets/calendar/CalendarStyle.tpl.css
@@ -25,7 +25,9 @@
{var skinClass=info.skinClass/}
{var general=aria.widgets.AriaSkinInterface.getGeneral()/}
.xCalendar_${skinClassName}_general {
- background-color:${skinClass.generalBackgroundColor|default:general.colors.bkg};
+ {if skinClass.generalBackgroundColor}
+ background-color:${skinClass.generalBackgroundColor};
+ {/if}
}
.xCalendar_${skinClassName}_label {
font-weight:bold;
@@ -34,7 +36,7 @@
.xCalendar_${skinClassName}_general a:hover {
text-decoration: underline;
}
- .xCalendar_${skinClassName}_month {
+ table.xCalendar_${skinClassName}_month {
font-size: 10px;
text-align: center;
border: 0px none;
@@ -53,7 +55,9 @@
padding-bottom:${skinClass.monthTitlePaddingBottom};
}
.xCalendar_${skinClassName}_day {
- border:1px solid ${skinClass.dayBorderColor|default:general.colors.bkg};
+ {if skinClass.dayBorderColor}
+ border:1px solid ${skinClass.dayBorderColor};
+ {/if}
width: 13px;
background-color:${skinClass.dayBackgroundColor};
color:${skinClass.dayColor};
@@ -69,7 +73,7 @@
cursor: pointer;
}
.xCalendar_${skinClassName}_unselectable {
- border: 1px solid ${skinClass.unselectableBorderColor|default:skinClass.dayBorderColor|default:general.colors.bkg};
+ border: 1px solid ${skinClass.unselectableBorderColor|default:skinClass.dayBorderColor};
background-color:${skinClass.unselectableBackgroundColor|default:skinClass.dayBackgroundColor};
color:${skinClass.unselectableColor|default:general.colors.disabled};
}
@@ -98,4 +102,4 @@
color:${skinClass.selectedColor};
}
{/macro}
-{/CSSTemplate}
+{/CSSTemplate}
View
12 src/aria/widgets/form/SelectStyle.tpl.css
@@ -15,21 +15,13 @@
{CSSTemplate {
$classpath : "aria.widgets.form.SelectStyle",
- $extends : "aria.widgets.WidgetStyle",
- $dependencies: ["aria.widgets.AriaSkinInterface"]
+ $extends : "aria.widgets.WidgetStyle"
}}
{var skinnableClassName="Select"/}
{var useFrame=true/}
{macro main()}
- {var general=aria.widgets.AriaSkinInterface.getGeneral()/}
.xSelect {
- {if general.font.size}
- font-size: ${general.font.size}px;
- {/if}
- {if general.font.family}
- font-family: ${general.font.family};
- {/if}
display:inline-block;
white-space:nowrap;
overflow:hidden;
@@ -37,4 +29,4 @@
{call startLooping()/}
{/macro}
-{/CSSTemplate}
+{/CSSTemplate}
View
2  test/attester.yml
@@ -5,6 +5,8 @@ resources:
- 'test'
tests:
aria-templates:
+ extraScripts:
+ - /aria/css/atskin.js
classpaths:
includes:
- test.MainTestSuite
Please sign in to comment.
Something went wrong with that request. Please try again.