Skip to content

Commit

Permalink
feat(themes): add dark schemas and mixins (#3106)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kdinev
Simeon Simeonoff authored and kdinev committed Nov 22, 2018
1 parent 504c1ab commit 0e7fc6d
Show file tree
Hide file tree
Showing 133 changed files with 2,948 additions and 1,346 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ All notable changes for each version of this project will be documented in this
## 6.2.1
- `igx-drop-down`:
- Added a new property `maxHeight`, defining the max height of the drop down.
- Themes
- Introducing schemas for easier bootstrapping of component themes.
- **Breaking change** removed $variant from `igx-checkbox-theme`, `igx-ripple-theme`, `igx-switch-theme`, `igx-input-group-theme`, `igx-slider-theme`, and `igx-tooltip-theme`. Use the `$schema` prop, now available on all component themes to change the look for a specific theme. See the [Theming](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/schemas.html) documentation to learn more.
- `igx-combo`:
- Added a new input property - `displayDensity`. It allows configuring the `displayDensity` of the combo's `value` and `search` inputs.

Expand Down
348 changes: 175 additions & 173 deletions extras/docs/themes/sassdoc/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const sassPlug = require('sassdoc-plugin-localization');
themeleon.use({

/**
* Builds a structure of json files which represents the retrieved comments per every sass declaration.
* Builds a structure of json files which represents the retrieved comments per every sass declaration.
*/
convert: (data, dir) => sassPlug.convert(data, dir),
/**
Expand All @@ -49,77 +49,79 @@ themeleon.use({
*/
const theme = themeleon(__dirname, function (t) {
/**
* If only json conversion is needed the whole process of documentation rendering has to be stopped.
* If only json conversion is needed the whole process of documentation rendering has to be stopped.
*/
if (t.ctx.convert) {
return t.convert(t.ctx._data, './extras/sassdoc/en');
return t.convert(t.ctx._data, './extras/sassdoc/en');
}
/**
* Copy the assets folder from the theme's directory in the
* destination directory.
*/
t.copy('assets');

const options = {
partials: {
authors: 'partials/authors',
description: 'partials/description',
example: 'partials/example',
footer: 'partials/footer',
header: 'partials/header',
github: 'partials/github',
definitionHeader: 'partials/definitionHeader',
require: 'partials/require',
search: 'partials/search',
sidenav: 'partials/sidenav',
source: 'partials/source',
usedBy: 'partials/usedby',
parameters: 'partials/parameters',
example: 'partials/example',
infraHead: 'partials/infragistics/header',
infraFoot: 'partials/infragistics/footer'
},
helpers: {
debug: function (content) {
console.log("----VALUE-----");
console.log(content);
},
json: function (context) {
return JSON.stringify(context);
},
github: function (file, line) {
const url = 'https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/core/styles/';
return `${url}${file}#L${line}`;
},
typeClass: function (context) {
switch (context) {
case "mixin":
return "--mixin";
case "function":
return "--function";
default:
return "";
/**
* Copy the assets folder from the theme's directory in the
* destination directory.
*/
t.copy('assets');

const options = {
partials: {
authors: 'partials/authors',
description: 'partials/description',
example: 'partials/example',
footer: 'partials/footer',
header: 'partials/header',
github: 'partials/github',
definitionHeader: 'partials/definitionHeader',
require: 'partials/require',
search: 'partials/search',
see: 'partials/see',
sidenav: 'partials/sidenav',
source: 'partials/source',
usedBy: 'partials/usedby',
parameters: 'partials/parameters',
properties: 'partials/properties',
example: 'partials/example',
infraHead: 'partials/infragistics/header',
infraFoot: 'partials/infragistics/footer'
},
helpers: {
debug: function (content) {
console.log("----VALUE-----");
console.log(content);
},
json: function (context) {
return JSON.stringify(context);
},
github: function (file, line) {
const url = 'https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/core/styles/';
return `${url}${file}#L${line}`;
},
typeClass: function (context) {
switch (context) {
case "mixin":
return "--mixin";
case "function":
return "--function";
default:
return "";
}
},
trimType: (value) => {
return value.substring(0, 3);
}
}
},
trimType: (value) => {
return value.substring(0, 3);
}
};

/**
* Render `views/index.handlebars` with the theme's context (`ctx` below)
* as `index.html` in the destination directory.
*/
t.handlebars('views/index.hbs', 'index.html', options);

/**
* Applies the translations from the json files.
*/
if (t.ctx.render) {
const jsonDir = t.ctx.jsonDir ? t.ctx.jsonDir : './extras/sassdoc/en';
t.render(t.ctx._data, jsonDir);
}
};

/**
* Render `views/index.handlebars` with the theme's context (`ctx` below)
* as `index.html` in the destination directory.
*/
t.handlebars('views/index.hbs', 'index.html', options);

/**
* Applies the translations from the json files.
*/
if (t.ctx.render) {
const jsonDir = t.ctx.jsonDir ? t.ctx.jsonDir : './extras/sassdoc/en';
t.render(t.ctx._data, jsonDir);
}
});
/**
* Actual theme function. It takes the destination directory `dest`
Expand All @@ -130,109 +132,109 @@ const theme = themeleon(__dirname, function (t) {
* configuration.
*/
module.exports = function (dest, ctx) {
var def = {
display: {
access: ['public', 'private'],
alias: true,
watermark: false,
},
groups: {
'undefined': 'General',
},
'shortcutIcon': 'http://sass-lang.com/favicon.ico'
};

// Apply default values for groups and display.
ctx.groups = extend(def.groups, ctx.groups);
ctx.display = extend(def.display, ctx.display);

// Extend top-level context keys.
ctx = extend({}, def, ctx);

/**
* Parse text data (like descriptions) as Markdown, and put the
* rendered HTML in `html*` variables.
*
* For example, `ctx.package.description` will be parsed as Markdown
* in `ctx.package.htmlDescription`.
*
* See <http://sassdoc.com/extra-tools/#markdown>.
*/
extras.markdown(ctx);

/**
* Add a `display` property for each data item regarding of display
* configuration (hide private items and aliases for example).
*
* You'll need to add default values in your `.sassdocrc` before
* using this filter:
*
* {
* "display": {
* "access": ["public", "private"],
* "alias": false
* }
* }
*
* See <http://sassdoc.com/extra-tools/#display-toggle>.
*/
extras.display(ctx);

/**
* Allow the user to give a name to the documentation groups.
*
* We can then have `@group slug` in the docblock, and map `slug`
* to `Some title string` in the theme configuration.
*
* **Note:** all items without a group are in the `undefined` group.
*
* See <http://sassdoc.com/extra-tools/#groups-aliases>.
*/
extras.groupName(ctx);

/**
* Use SassDoc indexer to index the data by group and type, so we
* have the following structure:
*
* {
* "group-slug": {
* "function": [...],
* "mixin": [...],
* "variable": [...]
* },
* "another-group": {
* "function": [...],
* "mixin": [...],
* "variable": [...]
* }
* }
*
* You can then use `data.byGroupAndType` instead of `data` in your
* templates to manipulate the indexed object.
*/
ctx.idx = lunr(function () {
this.field('type');
this.field('name');

ctx.data.forEach((doc) => {
this.add({
id: `${doc.context.type}-${doc.context.name}`,
name: doc.context.name,
type: doc.context.type
});
}, this);
});

ctx.data.byGroupAndType = extras.byGroupAndType(ctx.data);

// Avoid key collision with Handlebars default `data`.
// @see https://github.com/SassDoc/generator-sassdoc-theme/issues/22
ctx._data = ctx.data;
delete ctx.data;

/**
* Now we have prepared the data, we can proxy to the Themeleon
* generated theme function.
*/
return theme.apply(this, arguments);
};
var def = {
display: {
access: ['public', 'private'],
alias: true,
watermark: false,
},
groups: {
'undefined': 'General',
},
'shortcutIcon': 'http://sass-lang.com/favicon.ico'
};

// Apply default values for groups and display.
ctx.groups = extend(def.groups, ctx.groups);
ctx.display = extend(def.display, ctx.display);

// Extend top-level context keys.
ctx = extend({}, def, ctx);

/**
* Parse text data (like descriptions) as Markdown, and put the
* rendered HTML in `html*` variables.
*
* For example, `ctx.package.description` will be parsed as Markdown
* in `ctx.package.htmlDescription`.
*
* See <http://sassdoc.com/extra-tools/#markdown>.
*/
extras.markdown(ctx);

/**
* Add a `display` property for each data item regarding of display
* configuration (hide private items and aliases for example).
*
* You'll need to add default values in your `.sassdocrc` before
* using this filter:
*
* {
* "display": {
* "access": ["public", "private"],
* "alias": false
* }
* }
*
* See <http://sassdoc.com/extra-tools/#display-toggle>.
*/
extras.display(ctx);

/**
* Allow the user to give a name to the documentation groups.
*
* We can then have `@group slug` in the docblock, and map `slug`
* to `Some title string` in the theme configuration.
*
* **Note:** all items without a group are in the `undefined` group.
*
* See <http://sassdoc.com/extra-tools/#groups-aliases>.
*/
extras.groupName(ctx);

/**
* Use SassDoc indexer to index the data by group and type, so we
* have the following structure:
*
* {
* "group-slug": {
* "function": [...],
* "mixin": [...],
* "variable": [...]
* },
* "another-group": {
* "function": [...],
* "mixin": [...],
* "variable": [...]
* }
* }
*
* You can then use `data.byGroupAndType` instead of `data` in your
* templates to manipulate the indexed object.
*/
ctx.idx = lunr(function () {
this.field('type');
this.field('name');

ctx.data.forEach((doc) => {
this.add({
id: `${doc.context.type}-${doc.context.name}`,
name: doc.context.name,
type: doc.context.type
});
}, this);
});

ctx.data.byGroupAndType = extras.byGroupAndType(ctx.data);

// Avoid key collision with Handlebars default `data`.
// @see https://github.com/SassDoc/generator-sassdoc-theme/issues/22
ctx._data = ctx.data;
delete ctx.data;

/**
* Now we have prepared the data, we can proxy to the Themeleon
* generated theme function.
*/
return theme.apply(this, arguments);
};
2 changes: 2 additions & 0 deletions extras/docs/themes/sassdoc/views/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,8 @@
{{!-- {{~>source~}} --}}
{{~>example~}}
{{> parameters}}
{{> properties}}
{{> see}}
{{> usedBy}}
{{> require}}
{{> authors}}
Expand Down
Loading

0 comments on commit 0e7fc6d

Please sign in to comment.