diff --git a/capabilities.json b/capabilities.json index 53ae527..1420e65 100644 --- a/capabilities.json +++ b/capabilities.json @@ -158,7 +158,7 @@ } } ], - "dataReductionAlgorithm": {"window": {"count": 20000}} + "dataReductionAlgorithm": { "window": { "count": 20000 } } }, "rowCount": { "preferred": { @@ -176,13 +176,6 @@ "objects": { "presentation": { "properties": { - "shadow": { - "displayName": "Shadow", - "description": "Control the style of border around cards.", - "type": { - "bool": "true" - } - }, "dateFormat": { "displayName": "Date Format", "description": "Subtitle date format using tokens; e.g. YYYY MM DD h:mm:ss", @@ -197,13 +190,6 @@ "text": " \u2022 " } }, - "showImageOnBack": { - "description": "Whether to show Title Images on the card's MetaData face", - "displayName": "Title Image on MetaData", - "type": { - "bool": "true" - } - }, "cardWidth": { "displayName": "Card Width", "description": "Width, in pixels, of each card", @@ -231,6 +217,27 @@ "type": { "bool": true } + }, + "shadow": { + "displayName": "Shadow", + "description": "Control the style of border around cards.", + "type": { + "bool": "true" + } + }, + "fade": { + "displayName": "Fade Text", + "description": "Fade text toward the bottom of the card", + "type": { + "bool": "true" + } + }, + "showImageOnBack": { + "description": "Whether to show Title Images on the card's MetaData face", + "displayName": "Title Image on MetaData", + "type": { + "bool": "true" + } } }, "displayName": "Cards" @@ -265,6 +272,58 @@ }, "displayName": "Reader" }, + "metadata": { + "properties": { + "fontSize": { + "description": "MetaData text size", + "displayName": "Text Size", + "type": { + "formatting": { + "fontSize": true + } + } + }, + "titleFontFamily": { + "displayName": "Title font family", + "type": { + "formatting": { + "fontFamily": true + } + } + }, + "valueFontFamily": { + "displayName": "Value font family", + "type": { + "formatting": { + "fontFamily": true + } + } + }, + "titleColor": { + "description": "Color for the row titles", + "displayName": "Titles Color", + "type": { + "fill": { + "solid": { + "color": "#bbb" + } + } + } + }, + "valueColor": { + "description": "Color for the MetaData values", + "displayName": "Values Color", + "type": { + "fill": { + "solid": { + "color": "#000" + } + } + } + } + }, + "displayName": "MetaData Format" + }, "flipState": { "properties": { "show": { @@ -279,8 +338,8 @@ "displayName": "Card Face", "type": { "enumeration": [ - {"value": "preview", "displayName": "Preview"}, - {"value": "metadata", "displayName": "MetaData"} + { "value": "preview", "displayName": "Preview" }, + { "value": "metadata", "displayName": "MetaData" } ] } } @@ -314,4 +373,4 @@ }, "suppressDefaultTitle": true, "supportsHighlight": false -} \ No newline at end of file +} diff --git a/lib/@uncharted/cards/example/index.html b/lib/@uncharted/cards/example/index.html index 94ceb3c..ef5dc92 100644 --- a/lib/@uncharted/cards/example/index.html +++ b/lib/@uncharted/cards/example/index.html @@ -1,167 +1,172 @@ - + - - Cards - - - - - -
-
- - - -
-
-
- - -
-
- - -
-
+ + Cards + + + + + +
+
+ + + +
+
+
+ +
- -
- - - - - + + + - + ticking = true; + } + }); + + $('#toggle-inline-mode').click(function () { + cards.toggleInlineDisplayMode(); + }); + + $('#flip-cards').click(function () { + cards.cardInstances.forEach(function (card){ card.flip(); }); + }); + + $('#load-more').click(function () { + cards.loadMoreData(getMoreData()); + }); + + \ No newline at end of file diff --git a/lib/@uncharted/cards/package.json b/lib/@uncharted/cards/package.json index f0a8b57..d0d51c9 100644 --- a/lib/@uncharted/cards/package.json +++ b/lib/@uncharted/cards/package.json @@ -1,6 +1,6 @@ { "name": "@uncharted/cards", - "version": "0.13.7", + "version": "0.13.9", "main": "dist/uncharted.cards.js", "scripts": { "test": "./node_modules/.bin/karma start", @@ -16,12 +16,12 @@ "author": "Uncharted Software Inc.", "description": "", "dependencies": { - "lodash": "^4.17.4" + "lodash": "^4.17.11" }, "devDependencies": { - "babel-core": "^6.25.0", - "babel-loader": "^7.1.1", - "babel-polyfill": "^6.23.0", + "babel-core": "^6.26.0", + "babel-loader": "^7.1.2", + "babel-polyfill": "^6.26.0", "babel-preset-latest": "^6.24.1", "chai": "^4.1.2", "clean-webpack-plugin": "^0.1.16", @@ -29,7 +29,7 @@ "css-loader": "^0.28.4", "eslint": "^5.15.1", "eslint-loader": "^2.1.2", - "handlebars": "^4.0.10", + "handlebars": "^4.0.11", "handlebars-loader": "^1.7.0", "karma": "^4.0.1", "karma-chrome-launcher": "^2.2.0", diff --git a/lib/@uncharted/cards/src/components/card/_card.scss b/lib/@uncharted/cards/src/components/card/_card.scss index a73117d..f1183ba 100644 --- a/lib/@uncharted/cards/src/components/card/_card.scss +++ b/lib/@uncharted/cards/src/components/card/_card.scss @@ -37,8 +37,6 @@ box-shadow: $card-shadow; } .card-content-container { - padding-left: 0; - left: 0; padding-left: $card-margin * 2; left: -(2 * $card-margin); &:after { @@ -101,8 +99,8 @@ bottom: 0; } - .metadata-content-container.has-image:after { - bottom: 50px; + .metadata-content-container.has-image:after { + bottom: 50px; } .card-reader-container:after { @@ -213,30 +211,24 @@ .meta-data-table { margin-top: 10px; font-size: 12px; - display: flex; - - .keys-container, - .values-container { - display: flex; - flex-direction: column; + vertical-align: bottom; + table { + table-layout: fixed; } - .value-box { &.overflow:after { width: 15px; } } - .keys-container { + .key-box { max-width: 38.2%; - .value-box { - text-align: right; - padding-right: 2px; - color: #bbb; - } + text-align: right; + padding-right: 2px; + color: #bbb; } - .values-container { + .meta-data-box { overflow: hidden; .value { padding-left: 2px; diff --git a/lib/@uncharted/cards/src/components/card/card.handlebars b/lib/@uncharted/cards/src/components/card/card.handlebars index 5c18f62..daf5254 100644 --- a/lib/@uncharted/cards/src/components/card/card.handlebars +++ b/lib/@uncharted/cards/src/components/card/card.handlebars @@ -47,18 +47,15 @@
{{/if}}
-
-
+
{{#if imageUrl}} - + {{/if}}
diff --git a/lib/@uncharted/cards/src/components/card/card.js b/lib/@uncharted/cards/src/components/card/card.js index 38d96cb..f8f8d06 100644 --- a/lib/@uncharted/cards/src/components/card/card.js +++ b/lib/@uncharted/cards/src/components/card/card.js @@ -56,6 +56,11 @@ export default class Card extends IBindable { const displayBackCardByDefault = this._config['card.displayBackCardByDefault']; const disableFlipping = this._config['card.disableFlipping']; const enableBoxShadow = this._config['card.enableBoxShadow']; + const metaDataFontSize = this._config['card.metadata.fontSize']; + const metaDataTitleColor = this._config['card.metadata.title.color']; + const metaDataTitleFontFamily = this._config['card.metadata.title.fontFamily']; + const metaDataValueColor = this._config['card.metadata.value.color']; + const metaDataValueFontFamily = this._config['card.metadata.value.fontFamily']; const data = Object.assign({ titleOnly: noImages, @@ -72,6 +77,11 @@ export default class Card extends IBindable { removeFrontCard: disableFlipping && displayBackCardByDefault, removeBackCard: disableFlipping && !displayBackCardByDefault, tooltip: $('
').html(this.data.summary).text(), + metaDataFontSize: metaDataFontSize, + metaDataTitleColor: metaDataTitleColor, + metaDataTitleFontFamily: metaDataTitleFontFamily, + metaDataValueColor: metaDataValueColor, + metaDataValueFontFamily: metaDataValueFontFamily, }, this.data); this.$element = $(cardTemplate(data)); diff --git a/lib/@uncharted/cards/src/components/constants.js b/lib/@uncharted/cards/src/components/constants.js index 59649c1..3156c6a 100644 --- a/lib/@uncharted/cards/src/components/constants.js +++ b/lib/@uncharted/cards/src/components/constants.js @@ -15,6 +15,11 @@ export const DEFAULT_CONFIG = { 'card.displayBackCardByDefault': false, 'card.disableLinkNavigation': false, // set to true if you plan to handle the CARD_CLICK_LINK event 'card.displayLargeImage': false, // false is actually more like 'auto' + 'card.metadata.fontSize': 10, // pt, to match the PBI fontSize control + 'card.metadata.title.color': '#bbb', + 'card.metadata.title.fontFamily': 'inherit', + 'card.metadata.value.color': '#000', + 'card.metadata.value.fontFamily': 'inherit', 'verticalReader.height': 500, 'readerContent.headerBackgroundColor': '#555', 'readerContent.headerSourceLinkColor': '#fff', diff --git a/lib/@uncharted/cards/src/components/readerContent/readerContent.handlebars b/lib/@uncharted/cards/src/components/readerContent/readerContent.handlebars index b1e6fe9..f1e52e9 100644 --- a/lib/@uncharted/cards/src/components/readerContent/readerContent.handlebars +++ b/lib/@uncharted/cards/src/components/readerContent/readerContent.handlebars @@ -6,20 +6,20 @@
- {{#if source}} - - {{/if}} -
-
- -
+ {{#if source}} + - {{#if iconUrl}} -
- {{/if}} + {{/if}} +
+
+ +
+
+ {{#if iconUrl}} +
+ {{/if}}
@@ -38,13 +38,13 @@ {{#if metadata}}
- + {{#each metadata}} -