├── .bowerrc ├── deploy.enc ├── favicon.ico ├── OSS_Notice.pdf ├── monogram-wdmk.png ├── .gitignore ├── .editorconfig ├── test ├── px-table-view-custom-tests.js ├── px-table-view-test-fixture.html └── px-table-view-base-tests.js ├── .github ├── PULL_REQUEST_TEMPLATE.md └── ISSUE_TEMPLATE.md ├── .jshintrc ├── wct.conf.json ├── package.json ├── bower.json ├── sass ├── px-table-view-predix.scss ├── px-table-view-sketch.scss ├── px-table-row-predix.scss ├── elements │ └── _table-row__actions.scss ├── _mixins.scss ├── _variables.scss └── px-table-row-sketch.scss ├── demo ├── index.html ├── px-table-view-demo.html ├── px-table-row-action-button-demo.html ├── px-table-view-sortable-list-demo.html └── px-table-row-demo.html ├── HISTORY.md ├── README.md ├── gulpfile.js ├── .travis.yml ├── index.html ├── px-table-row-action-button.html ├── scripts └── ghp.sh ├── css ├── px-table-view-styles.html ├── px-table-view-sketch-styles.html ├── px-table-view-predix-styles.html ├── px-table-row-sketch-styles.html ├── px-table-row-styles.html └── px-table-row-predix-styles.html ├── px-table-view.html ├── LICENSE.md ├── px-table-view-sortable-list.html └── px-table-row-swipe-behavior.html /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "./bower_components" 3 | } -------------------------------------------------------------------------------- /deploy.enc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PredixDev/px-table-view/HEAD/deploy.enc -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PredixDev/px-table-view/HEAD/favicon.ico -------------------------------------------------------------------------------- /OSS_Notice.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PredixDev/px-table-view/HEAD/OSS_Notice.pdf -------------------------------------------------------------------------------- /monogram-wdmk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PredixDev/px-table-view/HEAD/monogram-wdmk.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | temp 4 | bower_components 5 | .idea 6 | reports 7 | css/noprefix 8 | .yo-rc.json 9 | 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | -------------------------------------------------------------------------------- /test/px-table-view-custom-tests.js: -------------------------------------------------------------------------------- 1 | // This is the wrapper for custom tests, called upon web components ready state 2 | function runCustomTests() { 3 | // Place any setup steps like variable declaration and initialization here 4 | 5 | // This is the placeholder suite to place custom tests in 6 | // Use testCase(options) for a more convenient setup of the test cases 7 | suite('', function() { 8 | var element = document.getElementById('px_table_view_1'); 9 | element.items = [{ 10 | title: 'Item 1' 11 | }]; 12 | test('renders', function() { 13 | assert.ok(element); 14 | }); 15 | 16 | }); 17 | } 18 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Pull Request 2 | 3 | Hi, 4 | 5 | Thanks for helping us improve the Predix UI platform by submitting a Pull Request. 6 | 7 | To help us merge your Pull Request as fast as possible, please fill out the following sections: 8 | 9 | * ## A description of the changes proposed in the pull request: 10 | 11 | * ## A reference to a related issue (if applicable): 12 | 13 | * ## @mentions of the person or team responsible for reviewing proposed changes: 14 | 15 | * ## working tests: 16 | #### The tests need to be functional and/or unit tests, written for the wct framework, and placed in the test folder, following our testing guidelines. -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "esversion": 6, 3 | "curly": true, 4 | "eqeqeq": true, 5 | "immed": true, 6 | "latedef": true, 7 | "noarg": true, 8 | "sub": true, 9 | "undef": true, 10 | "boss": true, 11 | "eqnull": true, 12 | "node": true, 13 | "browser": true, 14 | "expr": true, 15 | "globals": { 16 | "it": false, 17 | "xit": false, 18 | "describe": false, 19 | "xdescribe": false, 20 | "before": false, 21 | "after": false, 22 | "beforeEach": false, 23 | "afterEach": false, 24 | "expect": false, 25 | "spyOn": false, 26 | "alert": false, 27 | "require": false, 28 | "requirejs": false, 29 | "Card": true, 30 | "iOS": false, 31 | "$": true, 32 | "define": false, 33 | "angular": false, 34 | "Polymer": false, 35 | "suite": false, 36 | "test": false, 37 | "assert": false 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /wct.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "verbose": false, 3 | "plugins": { 4 | "local": { 5 | "browsers": [ 6 | "chrome", 7 | "firefox" 8 | ] 9 | }, 10 | "sauce": { 11 | "disabled": true, 12 | "browsers": [ 13 | { 14 | "browserName": "microsoftedge", 15 | "platform": "Windows 10", 16 | "version": "" 17 | }, 18 | { 19 | "browserName": "internet explorer", 20 | "platform": "Windows 8.1", 21 | "version": "11" 22 | }, 23 | { 24 | "browserName": "safari", 25 | "platform": "OS X 10.12", 26 | "version": "10" 27 | }, 28 | { 29 | "browserName": "safari", 30 | "platform": "OS X 10.12", 31 | "version": "11" 32 | } 33 | ] 34 | } 35 | }, 36 | "suites": [ 37 | "test/px-table-view-test-fixture.html" 38 | ] 39 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "px-table-view", 3 | "author": "General Electric", 4 | "description": "A px mobile web component.", 5 | "version": "3.0.7", 6 | "keywords": [ 7 | "px", 8 | "px-mobile" 9 | ], 10 | "devDependencies": { 11 | "browser-sync": "^2.13.0", 12 | "gulp": "^3.9.1", 13 | "gulp-autoprefixer": "^3.1.0", 14 | "gulp-bump": "^2.4.0", 15 | "gulp-clean": "^0.3.2", 16 | "gulp-concat": "^2.6.0", 17 | "gulp-cssmin": "^0.1.7", 18 | "gulp-if": "^2.0.1", 19 | "gulp-load-plugins": "^1.2.4", 20 | "gulp-match": "^1.0.2", 21 | "gulp-rename": "^1.2.2", 22 | "gulp-sass": "^2.3.2", 23 | "gulp-sequence": "^0.4.5", 24 | "gulp-style-modules": "^0.1.0", 25 | "node-sass-import-once": "^1.2.0", 26 | "stream-combiner2": "^1.1.1", 27 | "sw-precache": "^4.2.3", 28 | "yargs": "^5.0.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Submit an Issue 2 | 3 | Hi, 4 | 5 | Thanks for helping us improve the Predix UI platform by submitting an issue. 6 | 7 | Before you begin, please check the list of existing issues to avoid submitting a duplicate issue. 8 | 9 | To help us solve this issue as fast as possible, please fill out the following sections: 10 | 11 | ## Expected behavior and actual behavior: 12 | 13 | ## Steps to reproduce the problem: 14 | 15 | ## Environment (_component version number, Browser (including version), operating system, hardware, etc_): 16 | 17 | ## Screenshots (_optional, but very helpful_): 18 | 19 | ## Code examples help us better understand the issue - follow the appropriate codepen for the component by going to https://predix-ui.com, finding the component in question, and clicking on the pencil icon under the demo. 20 | Once you've created your code example, you can save it under a new url. 21 | Please note that you should NOT use the same methods for production as the ones used in codepen - these methods are not production ready. -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "px-table-view", 3 | "version": "3.0.7", 4 | "description": "A responsive mobile first table view list.", 5 | "authors": [ 6 | "General Electric", 7 | "Jonnie Spratley " 8 | ], 9 | "main": [ 10 | "px-table-view.html" 11 | ], 12 | "keywords": [ 13 | "px", 14 | "px-mobile" 15 | ], 16 | "ignore": [ 17 | "*.enc", 18 | ".*", 19 | "node_modules", 20 | "bower_components", 21 | "sass", 22 | "HISTORY.md", 23 | "CONTRIBUTING.md", 24 | "OSS_Notice.pdf", 25 | "scripts", 26 | ".github", 27 | ".editorconfig", 28 | ".jshintrc", 29 | ".gitignore", 30 | "LICENSE.md", 31 | "gulpfile.js", 32 | "monogram-wdmk.png", 33 | "README.md", 34 | "wct.conf.json", 35 | "npm-debug.log" 36 | ], 37 | "dependencies": { 38 | "polymer": "^1.9.0", 39 | "iron-selector": "^2.0.0", 40 | "Sortable": "~1.4.0", 41 | "px-icon-set": "^2.0.0", 42 | "iron-resizable-behavior": "^2.0.0" 43 | }, 44 | "devDependencies": { 45 | "px-theme": "^3.0.0", 46 | "px-mobile-design": "^1.0.0", 47 | "px-demo": "^2.0.0", 48 | "px-defaults-design": "^2.0.0", 49 | "px-normalize-design": "^1.0.0", 50 | "px-box-sizing-design": "^1.0.0", 51 | "px-spacing-design": "^1.0.0", 52 | "px-buttons-design": "^2.0.0" 53 | }, 54 | "resolutions": { 55 | "webcomponentsjs": "^0.7.24" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /test/px-table-view-test-fixture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Component Test : Fixture for px-table-view 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

Web Component Test : Fixture for px-table-view

27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /sass/px-table-view-predix.scss: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Copyright (c) 2016 GE Global Research. All rights reserved. 4 | * 5 | * The copyright to the computer software herein is the property of 6 | * GE Global Research. The software may be used and/or copied only 7 | * with the written permission of GE Global Research or in accordance 8 | * with the terms and conditions stipulated in the agreement/contract 9 | * under which the software has been supplied. 10 | */ 11 | @charset "utf-8"; 12 | @import "variables"; 13 | @import "mixins"; 14 | @import 'px-table-view-sketch.scss'; 15 | 16 | ///------------------------------------------------------ 17 | @include b ('table-view') { 18 | 19 | border-top: $table-row-border-width $table-row-border-style $table-row-border-color; 20 | border-bottom: $table-row-border-width $table-row-border-style $table-row-border-color; 21 | 22 | ///------------------------------------------------------ 23 | @include m ('border-bottom') { 24 | .table-row { 25 | border-bottom-style: $table-row-border-style; 26 | border-bottom-width: $table-row-border-width; 27 | border-bottom-color: $table-row-border-color; 28 | } 29 | } 30 | 31 | ///------------------------------------------------------ 32 | ///.table-row--selected 33 | .table-row--selected { 34 | 35 | background-color: $table-row-selected-background-color; 36 | color : $table-row-active-font-color; 37 | 38 | .table-row__body, 39 | .table-row__label, 40 | .table-row__label2, 41 | .table-row__subtitle, 42 | .table-row__title { 43 | color: $table-row-active-font-color; 44 | } 45 | 46 | .table-row:before { 47 | color: $table-row-active-font-color; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 25 | 26 | 55 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | v3.0.7 2 | ================== 3 | * add device flags 4 | 5 | v3.0.6 6 | ================== 7 | * override min width for bare buttons 8 | 9 | v3.0.5 10 | ================== 11 | * Fix for sub-component demos to refer to shared API docs. 12 | 13 | v3.0.4 14 | ================== 15 | * fix comment for analyzer 16 | 17 | v3.0.3 18 | ================== 19 | * fix border variable typo 20 | 21 | v3.0.2 22 | ================== 23 | * update ghp.sh to fix travis build 24 | 25 | v3.0.1 26 | ================== 27 | * Mitigate #10 28 | 29 | v3.0.0 30 | ================== 31 | * Fix px-table-row demo 32 | * Update colors and icons 33 | * Update dependencies for refresh 34 | 35 | v2.0.7 36 | ================== 37 | * Solves issue that prevents sorting in non-shadow DOM. Locks this component in to the Sortable library at the 1.4.X release track, as a regression in 1.5.X causes the sort to fail. Waiting on a patch submitted to Sortable that should fix the issue. 38 | * Manually handles moving elements between sortable lists in shady DOM 39 | * Removes some sort configuration properties that do not work because they can't be dynamic (`sort`, `disabled`, `store`) or can't notify 40 | 41 | v2.0.6 42 | ================== 43 | * updated to px-demo 44 | 45 | v2.0.5 46 | ================== 47 | * added OSS_Notice.pdf and .bowerrc 48 | 49 | v2.0.4 50 | ================== 51 | * Updating so px-demo-snippet and px-api-viewer get new grays 52 | 53 | v2.0.3 54 | ================== 55 | * Update colors design to pick up new colors 56 | 57 | v2.0.2 58 | ================== 59 | * changing ghp.sh to account for Alpha releases 60 | 61 | v2.0.1 62 | ================== 63 | * Fix travis configuration 64 | 65 | v2.0.0 66 | ================== 67 | * Standardize component API 68 | * Remove un-supported features 69 | * Remove unused dependencies 70 | 71 | v1.1.0 72 | ================== 73 | * Updated dependencies 74 | 75 | v1.0.3 76 | ================== 77 | * changing browser in wct testing from safari 8 to safari 10 on elcapitan 78 | 79 | v1.0.2 80 | ================== 81 | * changing all devDeps to ^ 82 | 83 | v1.0.1 84 | ================== 85 | * Update px-theme to 2.0.1 and update test fixtures 86 | 87 | v0.0.1 88 | ================== 89 | * Initial release 90 | -------------------------------------------------------------------------------- /sass/px-table-view-sketch.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "variables"; 3 | @import "mixins"; 4 | @import "px-mobile-design/sass/_mixins.scss"; 5 | 6 | // Generic 7 | @import "px-normalize-design/_generic.normalize.scss"; 8 | @import "px-box-sizing-design/_generic.box-sizing.scss"; 9 | 10 | // Base 11 | 12 | @include b ('table-view') { 13 | @include clearfix(); 14 | @include pxFonts(); 15 | font-size : $table-row-font-size; 16 | 17 | list-style-type: none; 18 | margin : 0; 19 | padding : 0; 20 | position : relative; 21 | display : flex; 22 | flex-direction : column; 23 | 24 | ///------------------------------------------------------ 25 | @include c ('.table-row') { 26 | padding: $inuit-base-spacing-unit--small; 27 | } 28 | 29 | ///------------------------------------------------------ 30 | ///.table-view--tiny 31 | @include modifier ('tiny') { 32 | @include c ('.table-row') { 33 | padding: $inuit-base-spacing-unit--tiny !important; 34 | } 35 | } 36 | 37 | ///------------------------------------------------------ 38 | ///.table-view--small 39 | @include modifier ('small') { 40 | @include c ('.table-row') { 41 | padding: $inuit-base-spacing-unit--small !important; 42 | } 43 | } 44 | 45 | ///------------------------------------------------------ 46 | ///.table-view--large 47 | @include modifier ('large') { 48 | @include c ('.table-row') { 49 | padding: $inuit-base-spacing-unit--large !important; 50 | } 51 | } 52 | 53 | ///------------------------------------------------------ 54 | ///.table-view--huge 55 | @include modifier ('huge') { 56 | @include c ('.table-row') { 57 | padding: $inuit-base-spacing-unit--huge !important; 58 | } 59 | } 60 | 61 | ///------------------------------------------------------ 62 | @include modifier ('regular') { 63 | @include c ('.table-row') { 64 | padding: $inuit-base-spacing-unit !important; 65 | } 66 | } 67 | 68 | ///------------------------------------------------------ 69 | ///.table-view--flush 70 | @include modifier ('flush') { 71 | @include c ('.table-row') { 72 | padding: 0 !important; 73 | } 74 | } 75 | 76 | &ul { 77 | margin: 0 !important; 78 | } 79 | } 80 | 81 | // Trumps 82 | 83 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Overview 2 | 3 | `Px-table-view` is a Predix UI component that creates a table-style list of items which can be interacted with by the user. It works as users expect from a native mobile app, allowing swiping, tapping, and re-ordering of list items. 4 | 5 | Use the `px-table-view` component to create list-style interfaces like menus or to display sets of related data that can be acted upon. 6 | 7 | ## Usage 8 | 9 | ### Prerequisites 10 | 1. node.js 11 | 2. npm 12 | 3. bower 13 | 4. [webcomponents-lite.js polyfill](https://github.com/webcomponents/webcomponentsjs) 14 | 15 | Node, npm, and bower are necessary to install the component and dependencies. webcomponents.js adds support for web components and custom elements to your application. 16 | 17 | ## Getting Started 18 | 19 | First, install the component via bower on the command line: 20 | 21 | ``` 22 | bower install px-table-view --save 23 | ``` 24 | 25 | Second, import the component in your application with the following tag in your head: 26 | 27 | ``` 28 | 29 | ``` 30 | 31 | Finally, use the component in your application: 32 | 33 | ``` 34 | 35 | 36 | 37 | 38 | ``` 39 | 40 | ## Documentation 41 | 42 | Read the full API and view the demo [here](https://predixdev.github.io/predix-ui/?type=component&show=px-table-view/). 43 | 44 | The documentation in this repository is supplemental to the official Predix documentation, which is continuously updated and maintained by the Predix documentation team. Go to [http://predix.io](http://predix.io) to see the official Predix documentation. 45 | 46 | 47 | ## Local Development 48 | 49 | From the component's directory: 50 | 51 | ``` 52 | $ npm install 53 | $ bower install 54 | $ gulp 55 | ``` 56 | 57 | From the component's directory, to start a local server run: 58 | 59 | ``` 60 | $ gulp serve 61 | ``` 62 | 63 | Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page with working examples. 64 | 65 | ### GE Coding Style Guide 66 | 67 | [GE JS Developer's Guide](https://github.com/GeneralElectric/javascript) 68 | 69 | ## Known Issues 70 | 71 | Please use [Github Issues](https://github.com/PredixDev/px-table-view/issues) to submit any bugs you might find. 72 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const path = require('path'); 3 | const gulp = require('gulp'); 4 | const pkg = require('./package.json'); 5 | const $ = require('gulp-load-plugins')(); 6 | const gulpSequence = require('gulp-sequence'); 7 | const importOnce = require('node-sass-import-once'); 8 | const stylemod = require('gulp-style-modules'); 9 | const browserSync = require('browser-sync').create(); 10 | const gulpif = require('gulp-if'); 11 | const combiner = require('stream-combiner2'); 12 | const bump = require('gulp-bump'); 13 | const argv = require('yargs').argv; 14 | 15 | const sassOptions = { 16 | importer: importOnce, 17 | importOnce: { 18 | index: true, 19 | bower: true 20 | } 21 | }; 22 | 23 | gulp.task('clean', function() { 24 | return gulp.src(['.tmp', 'css'], { 25 | read: false 26 | }).pipe($.clean()); 27 | }); 28 | 29 | function handleError(err){ 30 | console.log(err.toString()); 31 | this.emit('end'); 32 | } 33 | 34 | function buildCSS(){ 35 | return combiner.obj([ 36 | $.sass(sassOptions), 37 | $.autoprefixer({ 38 | browsers: ['last 2 versions'], 39 | cascade: false, 40 | flexbox: false 41 | }), 42 | gulpif(!argv.debug, $.cssmin()) 43 | ]).on('error', handleError); 44 | } 45 | 46 | gulp.task('sass', function() { 47 | return gulp.src(['./sass/*.scss', '!./sass/*sketch.scss']) 48 | .pipe(buildCSS()) 49 | .pipe(gulpif(/.*predix/, 50 | $.rename(function(path){ 51 | path.basename = new RegExp('.+?(?=\-predix)').exec(path.basename)[0]; 52 | }) 53 | )) 54 | .pipe(stylemod({ 55 | moduleId: function(file) { 56 | return path.basename(file.path, path.extname(file.path)) + '-styles'; 57 | } 58 | })) 59 | .pipe(gulp.dest('css')) 60 | .pipe(browserSync.stream({match: 'css/*.html'})); 61 | }); 62 | 63 | gulp.task('watch', function() { 64 | gulp.watch(['sass/*.scss'], ['sass']); 65 | }); 66 | 67 | gulp.task('serve', function() { 68 | browserSync.init({ 69 | port: 8080, 70 | notify: false, 71 | reloadOnRestart: true, 72 | logPrefix: `${pkg.name}`, 73 | https: false, 74 | server: ['./', 'bower_components'], 75 | }); 76 | 77 | gulp.watch(['css/*-styles.html', '*.html', '*.js', 'demo/*.html']).on('change', browserSync.reload); 78 | gulp.watch(['sass/*.scss'], ['sass']); 79 | 80 | }); 81 | 82 | gulp.task('bump:patch', function(){ 83 | gulp.src(['./bower.json', './package.json']) 84 | .pipe(bump({type:'patch'})) 85 | .pipe(gulp.dest('./')); 86 | }); 87 | 88 | gulp.task('bump:minor', function(){ 89 | gulp.src(['./bower.json', './package.json']) 90 | .pipe(bump({type:'minor'})) 91 | .pipe(gulp.dest('./')); 92 | }); 93 | 94 | gulp.task('bump:major', function(){ 95 | gulp.src(['./bower.json', './package.json']) 96 | .pipe(bump({type:'major'})) 97 | .pipe(gulp.dest('./')); 98 | }); 99 | 100 | gulp.task('default', function(callback) { 101 | gulpSequence('clean', 'sass')(callback); 102 | }); 103 | -------------------------------------------------------------------------------- /sass/px-table-row-predix.scss: -------------------------------------------------------------------------------- 1 | @import '_variables.scss'; 2 | @import 'mixins'; 3 | @import 'px-table-row-sketch.scss'; 4 | 5 | :host { 6 | --px-btn-min-width: 0; 7 | } 8 | 9 | :host:last-of-type .table-row { 10 | border-bottom: 0; 11 | } 12 | 13 | /// @group px-table-row 14 | /// @access public 15 | .table-row { 16 | @include noselect(); 17 | @import 'elements/_table-row__actions.scss'; 18 | 19 | min-height : $table-row-min-height; 20 | line-height : $table-row-line-height; 21 | 22 | color : $table-row-color; 23 | font-size : $table-row-font-size; 24 | background-color: $table-row-background-color; 25 | border-bottom-width: $table-row-separator-width; 26 | border-bottom-style: $table-row-separator-style; 27 | border-bottom-color: $table-row-separator-color; 28 | 29 | &:active { 30 | transition: none; 31 | } 32 | 33 | ///------------------------------------------------------ 34 | 35 | ///.table-row--selected 36 | &--selected { 37 | 38 | background-color: $table-row-selected-background-color; 39 | color : $table-row-active-font-color; 40 | 41 | .table-row__body, 42 | .table-row__label, 43 | .table-row__label2, 44 | .table-row__subtitle, 45 | .table-row__title { 46 | color: $table-row-active-font-color; 47 | } 48 | 49 | .table-row:before { 50 | color: $table-row-active-font-color; 51 | } 52 | } 53 | } 54 | 55 | ///------------------------------------------------------ 56 | ///.table-row > a 57 | .table-row > a { 58 | text-decoration: none; 59 | @include tableRowClickable($table-row-active-background-color, $table-row-active-font-color); 60 | } 61 | 62 | ///------------------------------------------------------ 63 | ///.table-row__title 64 | .table-row__title { 65 | font-size: $table-row-title-font-size; 66 | color : $table-row-title-font-color; 67 | } 68 | 69 | ///------------------------------------------------------ 70 | ///.table-row__subtitle 71 | .table-row__subtitle { 72 | font-size: $table-row-subtitle-font-size; 73 | color : $table-row-subtitle-font-color; 74 | } 75 | 76 | ///------------------------------------------------------ 77 | ///.table-row__body 78 | .table-row__body { 79 | font-size: $table-row-body-font-size; 80 | color : $table-row-body-font-color; 81 | } 82 | 83 | ///------------------------------------------------------ 84 | ///.table-row__label 85 | .table-row__label { 86 | font-size: $table-row-label-font-size; 87 | color : $table-row-label-font-color; 88 | } 89 | 90 | ///------------------------------------------------------ 91 | .table-row--header { 92 | padding : $table-row-header-padding; 93 | font-size : $table-row-header-font-size; 94 | color : $table-row-header-font-color; 95 | background-color: $table-row-header-background-color; 96 | text-transform : $table-row-header-text-transform; 97 | min-height : var(--px-table-row-header-min-height, 24px); 98 | line-height : var(--px-table-row-header-line-height, 24px); 99 | border-top : none; 100 | border-bottom : none; 101 | } 102 | -------------------------------------------------------------------------------- /sass/elements/_table-row__actions.scss: -------------------------------------------------------------------------------- 1 | /// @group px-table-view 2 | /// Mixins 3 | @import "../variables"; 4 | @import "../mixins"; 5 | /// 6 | ///--------------------------------------------------------------------------- 7 | ///.table-row--actionable 8 | @include modifier ('swipeable') { 9 | background-color: $table-row-background-color; 10 | overflow : hidden; 11 | transform-style: preserve-3d; 12 | transition: transform cubic-bezier(.55,0,.1,1) 0.3s; 13 | z-index: 10; 14 | .table-row__content { 15 | position : relative; 16 | } 17 | } 18 | ///--------------------------------------------------------------------------- 19 | ///.table-row__actions 20 | @include element ('actions') { 21 | overflow : hidden; 22 | transform-style: preserve-3d; 23 | position : absolute; 24 | top : 0; 25 | bottom : 0; 26 | display : flex; 27 | flex-direction : row; 28 | justify-content: space-between; 29 | width : auto; 30 | align-self : stretch; 31 | align-items : stretch; 32 | 33 | &.is-visible { 34 | z-index: 50; 35 | } 36 | ///--------------------------------------------------------------------------- 37 | //left actions 38 | @include modifier ('left') { 39 | order : 0; 40 | left: 0; 41 | 42 | ///--------------------------------------------------------------------------- 43 | //Visible actions 44 | &.is-visible { 45 | width : auto; 46 | transform: translateX(0%); 47 | } 48 | } 49 | 50 | ///--------------------------------------------------------------------------- 51 | //right actions 52 | @include modifier ('right') { 53 | order: 10; 54 | right: 0; 55 | 56 | &.is-visible { 57 | width : auto; 58 | transform: translateX(-100%); 59 | } 60 | } 61 | } 62 | ///--------------------------------------------------------------------------- 63 | //Button 64 | @include element ('button') { 65 | @include noselect(); 66 | cursor : pointer; 67 | flex: 1; 68 | margin : 0; 69 | border-radius : 0; 70 | min-width : 80px; 71 | outline : 0; 72 | user-select : none; 73 | font-family : $font-family-default; 74 | margin : $table-row-button-margin; 75 | padding : $table-row-button-padding; 76 | color : $table-row-button-font-color; 77 | font-size : $table-row-button-font-size; 78 | display : flex; 79 | align-items : center; 80 | flex-direction : column; 81 | justify-content: center; 82 | 83 | @include modifier ('alert') { 84 | @include actionButton($table-row-button-color-alert, $table-row-button-color-alert-active, $table-row-button-color-alert-hover); 85 | } 86 | 87 | @include modifier ('warn') { 88 | @include actionButton($table-row-button-color-warn, $table-row-button-color-warn-active, $table-row-button-color-warn-hover); 89 | } 90 | 91 | @include modifier ('primary') { 92 | @include actionButton($table-row-button-color-primary, $table-row-button-color-primary-active, $table-row-button-color-primary-hover); 93 | } 94 | 95 | @include modifier ('info') { 96 | @include actionButton($table-row-button-color-info, $table-row-button-color-info-active, $table-row-button-color-info-hover); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /sass/_mixins.scss: -------------------------------------------------------------------------------- 1 | /// @group px-table-view 2 | 3 | ///Variables 4 | /// @group px-table-view 5 | @import "_variables.scss"; 6 | @import "px-mobile-design/sass/_mixins.scss"; 7 | 8 | ///------------------------------------------------------ 9 | /// @access public 10 | /// @group px-table-view 11 | @mixin pxFonts() { 12 | font-family: $font-family-default; 13 | font-weight: $font-weight; 14 | @content; 15 | } 16 | 17 | ///------------------------------------------------------ 18 | /// Make a table row item clickable. 19 | /// @access public 20 | @mixin tableRowClickable($bg:$table-row-active-background-color, $font:$table-row-active-font-color) { 21 | cursor: pointer; 22 | &:active { 23 | color : $font; 24 | background: $bg; 25 | } 26 | &:hover { 27 | 28 | } 29 | @content; 30 | } 31 | ///------------------------------------------------------ 32 | ///Style an action button 33 | /// @access public 34 | /// @group px-table-view 35 | @mixin actionButton($color, $active, $hover) { 36 | user-select : none; 37 | background-color: $color; 38 | border : none; 39 | outline : none; 40 | 41 | &:hover { 42 | background-color: $hover; 43 | } 44 | 45 | &:active { 46 | background-color: $active; 47 | } 48 | @content; 49 | } 50 | ///------------------------------------------------------ 51 | /// Mixin to make list turn into columns on larger screen. 52 | /// Similar to App Store 53 | /// On iPad there are grid list 54 | /// On iPhone there grid column 55 | /// @access public 56 | /// @group px-table-view 57 | @mixin n-columns($min-width, $gutter, $last-equal: false, $max-cols: 6) { 58 | display : flex; 59 | flex-wrap : wrap; 60 | flex-direction: row; 61 | margin-left: -$gutter; 62 | margin-top : -$gutter; 63 | 64 | > *, 65 | ::content > * { 66 | flex : 1 0 $min-width; 67 | margin-left: $gutter; 68 | margin-top : $gutter; 69 | @if $last-equal { 70 | @for $i from 2 through $max-cols{ 71 | $screen-width: ($min-width*$i)+($gutter*$i); 72 | $column-width: (100%/$i); 73 | @media (min-width: $screen-width) { 74 | max-width: calc(#{$column-width} - #{$gutter}); 75 | } 76 | } 77 | $column-width: (100%/$max-cols); 78 | @media (min-width: $min-width*$max-cols) { 79 | min-width: calc(#{$column-width} - #{$gutter}); 80 | } 81 | } 82 | } 83 | } 84 | 85 | ///------------------------------------------------------ 86 | /// Clearfix solution 87 | /// @group px-table-view 88 | @mixin clearfix() { 89 | &:after, 90 | &:before { 91 | display: table; 92 | content: ' '; 93 | } 94 | 95 | &:after { 96 | clear: both; 97 | } 98 | @content; 99 | } 100 | ///------------------------------------------------------ 101 | /// Scrollable solution 102 | /// @group px-table-view 103 | @mixin scrollable() { 104 | // overflow-y : scroll; 105 | overflow-y : auto; 106 | -webkit-overflow-scrolling: touch; 107 | @content; 108 | } 109 | 110 | ///------------------------------------------------------ 111 | /// @access public 112 | @mixin shadowEl($elName) { 113 | #{$elName}::shadow { 114 | @content; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | dist: trusty 3 | language: node_js 4 | node_js: 5 | - stable 6 | branches: 7 | except: 8 | - gh-pages 9 | addons: 10 | firefox: latest 11 | apt: 12 | sources: 13 | - google-chrome 14 | packages: 15 | - google-chrome-stable 16 | before_script: 17 | - npm install web-component-tester@^5.0.0 18 | - npm install bower 19 | - export PATH=$PWD/node_modules/.bin:$PATH 20 | - bower install 21 | script: 22 | - xvfb-run wct --skip-plugin sauce 23 | - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --plugin sauce --skip-plugin 24 | local; fi 25 | after_success: 26 | - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then openssl aes-256-cbc -k "$DEPLOYSECRET" 27 | -in deploy.enc -out deploy_key -d; fi 28 | - cd $TRAVIS_BUILD_DIR/scripts 29 | - chmod 755 ghp.sh 30 | - "./ghp.sh" 31 | env: 32 | global: 33 | - secure: hQe8KzrAnwGg0HKfW6rp18ayk8ZidYsDdJEXiRO/sx75UVb3hLiKdo7P/M5F1QglsaToN0Rz2gssyN5g5Ut8iX3B0foiXI4Gtt1pSnpQz943hE5pGjS5igY9vkuvqGnhsoPZqHMjmQkVXhs64MZbfHNJB1XkdGi70WJuYqePF5VtkCNaGmTJmVU7jr1ATzjIH/vuq7AXhagYtjCcYulqhhwXM7hgBBMs7DnKKXT4RquJlYncMn3R6/Y/p5rDpszLL/DUoO7GRCK7cx51reC+Fofz6jUr+NhIUS7UkmQDeyQGBNAFVfsqoGutvfdSAXjcFOJtWzgJKTSx1vRNGXhKiuJY1qYqnMGi/nRFKXpldRyVY7pb5kwqAiq5/wStrDBWT21WSiWsuAvybP0JW1uv407+1ZabwFPFWhrIPrArE0zuX1dOCpuwFn/GoSuzjeq0fhIO6d74Us2di1Sr2n7ifEaGTV1eLYJH9WDoT60oec8dajiiIhWqMWf3GF9/SdmE9kRocEbv3dvV+qIhvQJh7fBzfhr/20HgsZ64tb1ZCCnEmcXCskCQZFB/ScjdvT5Du76tyzV9y4PMSbWF3a8JtnDCXgkw7eKXcXVjiIpS8hpbeCxgD2UYZfzctrP84QDnsxSacff/hqKy1bZxEPdg3bdjnA0T81xRLXQNEiCZuTM= 34 | - secure: Lr1PBFJN20Vg0IIp9vl2VTFVTSZBkQbKFy9qFZpIWhFvqxFw7Ar0rRAGplbzWz/GgMGRPwvjuDh2BiYjOW3UylAazLSx3Nw418OvMC7qA2WGQFstxy87cawNxRKu0zIYOgChINIoBLo3Ng9bA2naPMIoArekUbmfL9Ddih6qA4Ve8w5yeBAIGmOlTivntS+/Dr8nVYmmoh3nbvL45HVvUsy7MkfwIP6aWhjB85+iBLns/ckoC1qKWpKj0KaEY7QJDPeHxqhYhPlBDxHTlWjM1Dj0MfyA13sN71UOB5cuk1pWYdX2DEBCqBMrzYfG88cWIyBluVO4D9jXeTp6o+IyaYz5xq5G3NpZMJy04mf1HJ7ujq+03eFVBBsBWAzQAQUA2/T4kZH/ay7Zpn9lAJq39VYr56Md244gUmWPIJvL6b33pEB5hG1u2QDuOSFA4AAadulb5DELPvlkM0klE3Xcp0a+O5uKa8tuxQ5zsNwwnXiS0YkKFgewH8tfcaODndzZUlnmgvc4SsH9a8rvIt/lLpnLu1+4LxX5uV/tnqeJbMlqd5XnAsXQP5PqA0CkaXP/Ih8UxzMFsNCnmRM4itr6Y9aJ90LW+K+0m8z6gH/v29xgZBx5+QnPE72fxm8Fnr5zcDJZxKOf9Xcr76b80Jqc+F/F2Df5u8BxDuylaQ677eo= 35 | - secure: K/CiArpcFn9rHY88sbqi0Vb8RDxEm7IdCeed+OZzTWbG+OGHXwyJerDQiddtTGUFxcpq7ob2vlnlXefTKTayv2X8R0fFeJVNXQ2cH5lG/NYqRzVMs1J/fCsPUfI267dv9TwMZy99aQ4uiTlU16ppKenF3mhAyiYc12pbAgy/91nITddZ0ilyuxw8i+0y5zikYBOFbo4/eVZaTSMUzFc+bMnmpCMIPNC+X8QzLsBVl7J0ColVOvLH2j8rgof+Uxi9oRehUX2YTx6avhW5id0MzFQ2feBMraKRcYHHc0I0zYvxJnStHFT5M3I/53JMxchcODU0+bjkiUjQSzpYHey9I/F6/r45j4I1p5MpfVWdvZohyxTDFkRuMc/kj6A0UPyh64ZXV/QOjZlAJxWkknmnwDDeOvAhmvMY/myBXSDxyQTodhCgxEvWSaKSO7X4CVa43hOvYSbwlhn2O6xJBqZJiv29il09YawaCRwKVwiyW6/aVcUrLSImu1urYLRXxdW6CvBxMoVRhUQSumAqbdl2/7zm431JbcHYELvW6HE2xN9puldEl274ZnZ48hh7VDMC+4OKjL5uiHb8A/MxNLv3DZ1z9TVACo9dskqLJb8bpbFfaYBaCBvf8G+leH1XhafEFcP6dcgH1nTEUDawysy/UF6CK6v+IjCxGj+7db00Z8k= 36 | - secure: Xab0HNMN9hr8WeOJ3GcbTbKl2UPzMwpypYmQjgqQwNoZmuPcO8JWT3JzvWbQS+edeM0jFxnH0RWpgwvRINkd/f5aazsAaKxzZIdXUL3vts7kgZUUpmflBmCtGMaolsYer5Rkya/r+0kV04ZjMsz0/PEo2UgJ5NndgyeEee+zt+x5v+omJcz8/3gfzLUxHgtmhMPnOCUZT1cjh3/8+xZqR+P1zlR4nfYLWKe/PDE1a05hNll7amOtgAMySBp9LoGEoZGBrqNF9DCKYKOOgGG4qOY0Ha9OJAdcFhgm04iFdBL9YhenwQAx/kvXzJSekEGjR7TBCNuESkHhEcVdygCsFjgaw/1nMTbGT0zZmYddnziFEWLUU5UrRcaXr4AfANdBsPY0mBo5tvJNYutk7hfgJ1BZJYHyqIRRxh1E8ndod50bcYXbTe6A5zaSEXKOMNLvNVmsHxSYxvn7xcGus5J+4peTgKdlMCoOF0BVEfRiXbQEeZc8cQ1MKH/NQyxLjmK1TqzNun/Owsz1kA3K5aJDq3TH320FHCru1XBnrSRUYDbdZ0Yyr87d5XKgXr8vo5tDsPUIeQgqxN/ZhyEvND4nqzA0TBeVVheoFQbuyU17QGYGSw8yfuugfxeD2orcGA+1GKXY4tztJnR129kdCdUO3rmY+fdY58e3XsxWW18Yv+s= 37 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Predix UI 7 | 8 | 12 | 41 | 42 | 45 | 46 | 47 | 50 | 51 | 52 | 53 | 57 | 58 | 59 | 60 | 61 | 65 | 70 | 71 | 74 | 75 | 76 | 79 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 95 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /demo/px-table-view-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 69 | 70 | 71 | 125 | -------------------------------------------------------------------------------- /sass/_variables.scss: -------------------------------------------------------------------------------- 1 | @import 'px-spacing-design/_trumps.spacing.scss'; 2 | 3 | $font-family-default : inherit !default; 4 | $font-weight : 500 !default; 5 | $table-row-color : var(--px-table-row-color, inherit); 6 | $table-row-font-size : var(--px-table-row-font-size, $inuit-base-font-size); 7 | $table-row-border-width : var(--px-table-row-border-width, 1px); 8 | $table-row-border-style : var(--px-table-row-border-style, solid); 9 | $table-row-border-color : var(--px-table-row-border-color, black); 10 | $table-row-separator-width : var(--px-table-row-separator-width, 1px); 11 | $table-row-separator-style : var(--px-table-row-separator-style, solid); 12 | $table-row-separator-color : var(--px-table-row-separator-color, black); 13 | $table-row-background-color : var(--px-table-row-background-color, white); 14 | $table-row-active-background-color : var(--px-table-row-selected-background-color, black); 15 | $table-row-selected-color : var(--px-table-row-selected-color, white); 16 | $table-row-selected-background-color : var(--px-table-row-selected-background-color, black); 17 | $table-row-active-font-color : var(--px-table-row-selected-color, white); 18 | $table-row-label-font-color : var(--px-table-row-label-color, black); 19 | $table-row-label-font-size : var(--px-table-row-label-font-size, $inuit-base-font-size); 20 | $table-row-min-height : var(--px-table-row-min-height, calculateRem(44px)); 21 | $table-row-line-height : var(--px-table-row-line-height, $inuit-base-font-size); 22 | $table-row-header-background-color : var(--px-table-row-header-background-color, black); 23 | $table-row-header-font-color : var(--px-table-row-header-color, inherit); 24 | $table-row-title-font-size : var(--px-table-row-title-font-size, $inuit-base-font-size); 25 | $table-row-title-font-color : var(--px-table-row-title-color, inherit); 26 | $table-row-subtitle-font-color : var(--px-table-row-subtitle-color, black); 27 | $table-row-subtitle-font-size : var(--px-table-row-subtitle-font-size, $inuit-base-font-size); 28 | $table-row-body-font-color : var(--px-table-row-body-color, black); 29 | $table-row-body-font-size : var(--px-table-row-body-font-size, $inuit-base-font-size); 30 | $table-row-header-font-size : var(--px-table-row-header-font-size, $inuit-base-font-size); 31 | $table-row-header-padding : var(--px-table-row-header-padding, $inuit-base-spacing-unit--tiny); 32 | $table-row-header-text-transform : var(--px-table-row-header-text-transform, uppercase); 33 | $table-view-responsive-row-width : calculateRem(230px); 34 | $table-view-responsive-row-gutters : 0; 35 | $table-view-responsive-row-max : 4; 36 | $table-view-padding--tiny : $inuit-base-spacing-unit--tiny; 37 | $table-view-padding--small : $inuit-base-spacing-unit--small; 38 | $table-view-padding--large : $inuit-base-spacing-unit--large; 39 | $table-view-padding--huge : $inuit-base-spacing-unit--huge; 40 | $table-row-button-padding : $inuit-base-spacing-unit--small; 41 | $table-row-button-margin : 0; 42 | $table-row-button-color-alert : var(--px-table-row-button-color-alert, black); 43 | $table-row-button-color-warn : var(--px-table-row-button-color-warn, black); 44 | $table-row-button-color-primary : var(--px-table-row-button-color-primary, black); 45 | $table-row-button-color-info : var(--px-table-row-button-color-info, black); 46 | $table-row-button-color-alert-hover : var(--px-table-row-button-color-alert-hover, #333); 47 | $table-row-button-color-warn-hover : var(--px-table-row-button-color-warn-hover, #333); 48 | $table-row-button-color-primary-hover : var(--px-table-row-button-color-primary-hover, #333); 49 | $table-row-button-color-info-hover : var(--px-table-row-button-color-info-hover, #333); 50 | $table-row-button-color-alert-active : var(--px-table-row-button-color-alert-pressed, #555); 51 | $table-row-button-color-warn-active : var(--px-table-row-button-color-warn-pressed, #555); 52 | $table-row-button-color-primary-active : var(--px-table-row-button-color-primary-pressed, #555); 53 | $table-row-button-color-info-active : var(--px-table-row-button-color-info-pressed, #555); 54 | $table-row-button-font-color : var(--px-table-row-button-font-color, white); 55 | $table-row-button-font-size : $inuit-base-font-size; 56 | $table-row-actions-transition : all 0.4s; 57 | $table-row-button-transition : all 0.4s; 58 | -------------------------------------------------------------------------------- /demo/px-table-row-action-button-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 80 | 81 | 82 | 134 | -------------------------------------------------------------------------------- /px-table-row-action-button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 29 | 30 | 56 | 57 | 148 | -------------------------------------------------------------------------------- /demo/px-table-view-sortable-list-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 79 | 80 | 81 | 130 | -------------------------------------------------------------------------------- /scripts/ghp.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Exit with nonzero exit code if anything fails 4 | set -e 5 | 6 | # ------------------------------------------------------------------------------ 7 | # CONFIGURE SCRIPT 8 | # ------------------------------------------------------------------------------ 9 | 10 | # Set our source branch (where we'll build from) and our target branch (where we 11 | # want to send the build page to) 12 | SOURCE_BRANCH="master" 13 | TARGET_BRANCH="gh-pages" 14 | REPO=`git config remote.origin.url` 15 | 16 | # Prep git credentials 17 | GIT_USER_NAME="Travis CI" 18 | GIT_USER_EMAIL="PredixtravisCI@ge.com" 19 | GIT_COMMIT_MESSAGE="[Travis] Rebuild documentation for Github Pages" 20 | 21 | # Check if we should run a deploy, or if we should skip it. Only commits to master 22 | # should trigger a build. Pull requests and commits to features branches should not. 23 | if [ "$TRAVIS_PULL_REQUEST" != "false" -o "$TRAVIS_BRANCH" != "$SOURCE_BRANCH" ]; then 24 | echo "Skipping deploy; just doing a build." 25 | exit 0 26 | fi 27 | 28 | # ------------------------------------------------------------------------------ 29 | # PREPARE FILESYSTEM 30 | # ------------------------------------------------------------------------------ 31 | 32 | cd $TRAVIS_BUILD_DIR 33 | 34 | # Find out our repo name from the bower file 35 | REPO_NAME=$(grep "name" bower.json | sed 's/"name": "//' | sed 's/",//') 36 | echo "repo name is ${REPO_NAME}" 37 | 38 | #delete all the files! 39 | rm -rf node_modules 40 | rm -rf bower_components 41 | rm -rf css 42 | rm -rf sass 43 | rm -rf scripts 44 | rm -rf test 45 | rm *.html 46 | rm *.json 47 | rm *.enc 48 | rm *.js 49 | rm *.png 50 | rm *.lock 51 | rm *.ico 52 | rm *.md 53 | rm *.pdf 54 | yes | rm .travis.yml 55 | rm .bowerrc 56 | rm .editorconfig 57 | rm -rf .github 58 | rm .gitignore 59 | rm .jshintrc 60 | 61 | # force installation of bower packages at the root 62 | echo "{ \"directory\": \".\" }" > .bowerrc 63 | 64 | #make sure the deploy key isn't saved into the git repo 65 | echo "deploy_key" > .gitignore 66 | 67 | # add the redirect. 68 | # Note: We are not overwriting the component's documentation `index.html` file 69 | # here, we are making sure that http://url/px-something/ redirects to 70 | # http://url/px-something/px-something/, where the demo page is installed 71 | meta_temp='' 72 | echo ${meta_temp/'COMPONENT_NAME'/$REPO_NAME} > index.html 73 | 74 | # ------------------------------------------------------------------------------ 75 | # BOWER 76 | # ------------------------------------------------------------------------------ 77 | # 78 | #for some reason, bower isn't available here, so, install it globally, so it doesn't end up as another folder. 79 | npm install bower -g 80 | bower cache clean 81 | # Install the repo and the dark-theme. 82 | bower install ${REPO_NAME} px-dark-theme px-dark-demo-theme 83 | 84 | #copy the bower file into our root 85 | yes | cp ${REPO_NAME}/bower.json bower.json 86 | 87 | #and run install 88 | bower install 89 | 90 | # ------------------------------------------------------------------------------ 91 | # BUILD PROJECT 92 | # ------------------------------------------------------------------------------ 93 | 94 | # Go into the component folder we've just installed from bower 95 | # cd ${REPO_NAME} 96 | 97 | # ------------------------------------------------------------------------------ 98 | # SW-PRECACHE 99 | # ------------------------------------------------------------------------------ 100 | 101 | # npm install sw-precache 102 | # sw-precache --root='.' --static-file-globs='**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}' 103 | 104 | # ------------------------------------------------------------------------------ 105 | # GIT PUSH TO REMOTES 106 | # ------------------------------------------------------------------------------ 107 | 108 | # Remember to exit out of the component before we do any git stuff 109 | # cd ../ 110 | 111 | # Do the git stuff 112 | 113 | # checkout a new orphan 114 | git checkout --orphan $TARGET_BRANCH 115 | 116 | git add -A . 117 | git commit -m "${GIT_COMMIT_MESSAGE}" --quiet 118 | 119 | # Set git credentials (defined in settings above) 120 | git config user.name ${GIT_USER_NAME} 121 | git config user.email ${GIT_USER_EMAIL} 122 | 123 | 124 | # We get the URL in this format: "https://github.com/PredixDev/px-something" 125 | # First, we need to replace https-style remote URL with a SSH-style remote 126 | # URL we can push to below 127 | SSH_GIT=${REPO/https:\/\/github.com\//git@github.com:} 128 | 129 | # Now, the URL is in this format: "git@github.com:PredixDev/px-something" 130 | # Next, replace `PredixDev` Github organization with `predix-ui` so configure 131 | # the correct remote to push to. 132 | # The resulting URL will be: "git@github.com:predix-ui/px-something" 133 | SSH_GIT_PREDIXUI=${SSH_GIT/:PredixDev\//:predix-ui\/} 134 | 135 | # Prepare ssh key, which we'll use to authenticate for SSH-push deploy 136 | eval `ssh-agent -s` 137 | # ... and change permissions for deploy key 138 | chmod 0400 $TRAVIS_BUILD_DIR/deploy_key 139 | 140 | # Push to predix-ui/repo `gh-pages` branch (force to override out-of-date refs) 141 | ssh-add $TRAVIS_BUILD_DIR/deploy_key 142 | git push $SSH_GIT_PREDIXUI $TARGET_BRANCH --force 143 | 144 | # Cloud Flare cache reset 145 | sleep 120s 146 | 147 | curl -X DELETE "https://api.cloudflare.com/client/v4/zones/${cloudflare_zone_identifier}/purge_cache" -H "X-Auth-Email: martin.wragg@ge.com" -H "X-Auth-Key: ${cloudflare}" -H "Content-Type: application/json" --data '{"purge_everything":true}' 148 | -------------------------------------------------------------------------------- /css/px-table-view-styles.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /px-table-view.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 44 | 45 | 46 | 47 | 58 | 68 | 202 | 203 | -------------------------------------------------------------------------------- /demo/px-table-row-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 103 | 104 | 105 | 236 | -------------------------------------------------------------------------------- /test/px-table-view-base-tests.js: -------------------------------------------------------------------------------- 1 | // This will be an automatically-generated variable based on the component 2 | // name provided to the pxtestkit yeoman generator 3 | var px_table_view_1; 4 | 5 | // This is the bootstrapping function that will run the base and custom tests 6 | // upon the completion of web components construction by Polymer 7 | document.addEventListener("WebComponentsReady", function() { 8 | runBaseTests(); 9 | runCustomTests(); 10 | }); 11 | 12 | // This is a utility/wrapper function for the test() function of 13 | // web-component-tester; the developer can use this to specify tests 14 | // through a configuration object instead of repeatedly writing the test 15 | // case construction and assertion code patterns 16 | /** 17 | * 18 | * testCase(options) : 19 | * Utility wrapper for web-component-tester's test() function to perform the 20 | * most common test cases. Accepts a configuration object that determines 21 | * how test() will be called (e.g., synchronously/asynchronously, event string 22 | * to use, etc). Each call to testCase corresponds to exactly 1 call to test(). 23 | * 24 | * options : test configuration object that accepts the following properties 25 | * 26 | * description : optional 27 | * The description for the test case 28 | * 29 | * root : required 30 | * The innermost HTML node which is ancestor to any and all nodes that are 31 | * involved in the test case. root can be specified either as a CSS selector 32 | * string or an HTMLElement. For the former case, the element located by 33 | * document.querySelector(root) will be used. 34 | * 35 | * eventSource : optional 36 | * The element from which the specified event will be dispatched. eventSource 37 | * can be specified either as a CSS selector string or an HTMLElement. For 38 | * the former case, the element located by root.querySelector(eventSource) 39 | * will be used to dispatch the event from. This means that if eventSource 40 | * was specified as a CSS selector string, the event will be dispatched from 41 | * and element that is a descendant of root. For eventSource specified as 42 | * an HTML element, the event source element can be any element in the DOM, 43 | * and not necessarily a descendant of root. 44 | * 45 | * eventChain: optional 46 | * The eventChain is a collection/array of objects with the following 47 | * structure: { eventSource, eventString, modifyFunction } that are processed 48 | * in sequence by this function (testCase), to provide the simulation of tests 49 | * that involve a series of interactions from the end user. 50 | * At each stage of the series these steps are perfomed: an eventCallback is 51 | * added as an event listener to eventSource for the eventString event, 52 | * modifyFunction is called with rootElement as argument, then an event with 53 | * eventString is dispatched from eventSource. The eventCallback added 54 | * earlier performs the same set of steps for the next stage. If all stages 55 | * (all elements of the eventChain array) have been processed, eventCallback 56 | * finally calls assertFunction instead. 57 | * 58 | * event : optional 59 | * The event string for the event that will be dispatched from event source. 60 | * Specifying the event string will run the test() function asynchronously 61 | * (i.e., callback will have the 'done' parameter used by Mocha in 62 | * asynchronous test cases). 63 | * 64 | * modifyFunction : optional 65 | * A function that will be called before the event is dispatched, for an 66 | * asynchronous test. The developer can use modifyFunction to perform 67 | * anything such as modifying the DOM to set up the test. modifyFunction is 68 | * presently guaranteed to work only synchronously (i.e., no event or timer 69 | * callbacks involved). 70 | * 71 | * assertFunction : 72 | * The assertion function that will used to test the case. This function 73 | * must return true or false. 74 | **/ 75 | 76 | function testCase(options) { 77 | var testDescription, rootElement, eventSource, eventString, eventChain, modifyFunction, assertFunction; 78 | var isAsync = false; 79 | var eventStr, eventSrc, modFn, assertFn; 80 | function _failTest(message) { 81 | test(message, function() { 82 | assert.isTrue(false); 83 | }); 84 | } 85 | if (typeof options === 'object') { 86 | testDescription = options['description'] || 'No test description provided'; 87 | rootElement = options['root'] || document; 88 | eventSource = options['eventSource'] || ''; 89 | eventString = options['event'] || ''; 90 | modifyFunction = options['modifyFunction']; 91 | assertFunction = options['assertFunction'] || function() { return true; }; 92 | eventChain = options['eventChain'] || 93 | [{ 'eventSource': eventSource, 'eventString': eventString, 'modifyFunction': modifyFunction }]; 94 | } 95 | // fail the test if options was not provided 96 | else { 97 | _failTest(testDescription + ' Invalid test spec'); 98 | return; 99 | } 100 | 101 | function _deriveRoot() { 102 | if (typeof rootElement === 'string') { 103 | rootElement = Polymer.dom(document).querySelector(rootElement); 104 | } 105 | } 106 | 107 | // if test is asynchronous (i.e., eventString is non-blank or non-empty eventChain was provided) 108 | if (eventString !== '' || (eventChain instanceof Array && eventChain.length > 0)) { 109 | isAsync = true; 110 | } 111 | // at this point eventSource is guaranteed to be an HTML element 112 | if (isAsync) { 113 | if (eventChain === []) { 114 | eventChain = [{'eventSource': eventSource, 'eventString': eventString, 'modifyFunction': modifyFunction}]; 115 | } 116 | test(testDescription, function(done) { 117 | thisDone = done; 118 | _deriveRoot(); 119 | if (!(rootElement instanceof HTMLElement) && !(rootElement instanceof HTMLDocument)) { 120 | assert.isTrue(false); 121 | done(); 122 | return; 123 | } 124 | 125 | // Add the interactions specified in the eventChain argument: 126 | // The interactions are added in reverse order of event dispatching 127 | // because of the general fact that event listeners are added before 128 | // corresponding events are dispatched. 129 | 130 | // Utility function that uses closure to generate callbacks for each event 131 | // Without closure the test infinite-loops on the 2nd event; 132 | function createCallback(eventSource, eventString, modifyFunction, rootElement) { 133 | return function() { 134 | if (modifyFunction instanceof Function) { 135 | modifyFunction(rootElement); 136 | } 137 | eventSource.dispatchEvent(new Event(eventString)); 138 | }; 139 | } 140 | var assertTest = function() { 141 | flush(function() { 142 | assertFunction(rootElement); 143 | thisDone(); 144 | }); 145 | }; 146 | // TODO: add validation on the eventChain structure and content types 147 | for (var ecLength = eventChain.length, ecIndex = ecLength-1; ecIndex >= 0; ecIndex--) { 148 | eventStr = eventChain[ecIndex].eventString; 149 | eventSrc = document.querySelector(eventChain[ecIndex].eventSource); 150 | if (ecIndex === (ecLength-1)) { 151 | eventSrc.addEventListener(eventStr, assertTest); 152 | } 153 | else { 154 | modFn = eventChain[ecIndex].modifyFunction; 155 | var prevEventSrc = document.querySelector(eventChain[ecIndex+1].eventSource); 156 | var prevEventStr = eventChain[ecIndex+1].eventString; 157 | eventSrc.addEventListener(eventStr, 158 | createCallback( 159 | document.querySelector(eventChain[ecIndex+1].eventSource), 160 | eventChain[ecIndex+1].eventString, 161 | modFn, 162 | rootElement 163 | ) 164 | ); 165 | } 166 | } 167 | eventSrc.dispatchEvent(new Event(eventStr)); 168 | }); 169 | } 170 | else { 171 | test(testDescription, function() { 172 | _deriveRoot(); 173 | if (!(rootElement instanceof HTMLElement) && !(rootElement instanceof HTMLDocument)) { 174 | assert.isTrue(false); 175 | return; 176 | } 177 | assert.isTrue(assertFunction(rootElement)); 178 | }); 179 | } 180 | } 181 | 182 | // Wrapper for base automation tests. This function is automatically 183 | // generated by the pxtestkit yeoman generator 184 | function runBaseTests() { 185 | px_table_view_1 = document.getElementById('px_table_view_1'); 186 | 187 | suite('Base Automation Tests for px-table-view', function() { 188 | 189 | test('Polymer exists', function() { 190 | assert.isTrue(Polymer !== null); 191 | }); 192 | test('px-table-view fixture is created', function() { 193 | assert.isTrue(document.getElementById('px_table_view_1') !== null); 194 | }); 195 | 196 | }); 197 | } 198 | -------------------------------------------------------------------------------- /sass/px-table-row-sketch.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import 'mixins'; 3 | 4 | ///Objects 5 | $inuit-enable-toggle--small: true; 6 | $inuit-enable-toggle--huge: true; 7 | $inuit-enable-toggle--large: true; 8 | 9 | $inuit-enable-inline-fields: true; 10 | $inuit-enable-input--tiny: true; 11 | $inuit-enable-input--small: true; 12 | $inuit-enable-input--regular: true; 13 | $inuit-enable-input--large: true; 14 | $inuit-enable-input--huge: true; 15 | $inuit-enable-input--bare: true; 16 | 17 | $inuit-enable-btn--primary: true; 18 | $inuit-enable-btn--tertiary: true; 19 | $inuit-enable-btn--small: true; 20 | $inuit-enable-btn--large: true; 21 | $inuit-enable-btn--huge: true; 22 | $inuit-enable-btn--icon: true; 23 | $inuit-enable-btn--bare: true; 24 | $inuit-enable-btn--disabled: true; 25 | ///---------------------------------------------- 26 | /// Style distrubed content 27 | @include c('') { 28 | @import 'px-buttons-design/_objects.buttons.scss'; 29 | } 30 | 31 | 32 | /// Table Row 33 | /// @group px-table-row 34 | /// @access public 35 | @include block ('table-row') { 36 | 37 | 38 | @include clearfix(); 39 | @include noselect(); 40 | 41 | box-sizing : border-box; 42 | position : relative; 43 | overflow : hidden; 44 | display : flex; 45 | flex-direction: row; 46 | appearance : normal; 47 | flex : 1; 48 | 49 | > *:not(input), 50 | > *:not(textarea), 51 | > *:not(select) { 52 | -webkit-text-size-adjust : none; 53 | -webkit-highlight : none; 54 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 55 | } 56 | 57 | ///--------------------------------------------------------------------------- 58 | ///.table-row--tiny 59 | @include modifier ('tiny') { 60 | padding: $table-view-padding--tiny; 61 | } 62 | ///--------------------------------------------------------------------------- 63 | ///.table-row--small 64 | @include modifier ('small') { 65 | padding: $table-view-padding--small; 66 | } 67 | ///--------------------------------------------------------------------------- 68 | ///.table-row--large 69 | @include modifier ('large') { 70 | padding: $table-view-padding--large; 71 | } 72 | ///--------------------------------------------------------------------------- 73 | ///.table-row--huge 74 | @include modifier ('huge') { 75 | padding: $table-view-padding--huge; 76 | } 77 | ///--------------------------------------------------------------------------- 78 | ///.table-row--flush 79 | @include modifier ('flush') { 80 | line-height: normal; 81 | } 82 | ///--------------------------------------------------------------------------- 83 | ///.table-row--col 84 | @include modifier ('col') { 85 | flex-direction: column; 86 | } 87 | ///--------------------------------------------------------------------------- 88 | ///.table-row--center 89 | @include modifier ('center') { 90 | justify-content: center; 91 | align-items: center; 92 | align-content: center; 93 | > *{ 94 | text-align: center; 95 | align-self: center; 96 | } 97 | } 98 | 99 | ///--------------------------------------------------------------------------- 100 | ///.table-row--tappable 101 | @include modifier ('tappable') { 102 | @include tableRowClickable($table-row-selected-background-color, $table-row-active-font-color); 103 | 104 | &:active { 105 | color : $table-row-selected-color; 106 | background-color: $table-row-selected-background-color; 107 | .table-row__body, 108 | .table-row__label, 109 | .table-row__subtitle, 110 | .table-row__title { 111 | color: $table-row-active-font-color; 112 | } 113 | } 114 | } 115 | 116 | ///.table-row--collapsable 117 | // TODO: Update to use visually hidden class 118 | @include modifier ('collapsable') { 119 | @include tableRowClickable($table-row-active-background-color, $table-row-active-font-color); 120 | border-bottom: none; 121 | 122 | ~ .table-row__content { 123 | transition : var(--px-table-row-collapseable-transition, all 0.3s); 124 | display : none; 125 | margin-left: $inuit-base-spacing-unit; 126 | .table-row { 127 | border-bottom: none; 128 | } 129 | } 130 | ///--------------------------------------------------------------------------- 131 | @include modifier ('is-opened') { 132 | ~ .table-row__content { 133 | display: block; 134 | } 135 | } 136 | } 137 | 138 | ///--------------------------------------------------------------------------- 139 | /// top aligned content 140 | @include modifier ('top') { 141 | align-items: flex-start; 142 | } 143 | ///--------------------------------------------------------------------------- 144 | /// bottom aligned content 145 | @include modifier ('bottom') { 146 | align-items: flex-end; 147 | } 148 | ///--------------------------------------------------------------------------- 149 | /// reversed content content 150 | @include modifier ('bottom') { 151 | align-items: flex-end; 152 | } 153 | 154 | ///--------------------------------------------------------------------------- 155 | ///Elements 156 | ///--------------------------------------------------------------------------- 157 | 158 | ///--------------------------------------------------------------------------- 159 | ///.table-row__content 160 | @include element ('content') { 161 | @include noselect(); 162 | display : flex; 163 | flex-direction: column; 164 | align-self : stretch; 165 | order : 2; 166 | flex : 1; 167 | user-select : none; 168 | ///--------------------------------------------------------------------------- 169 | @include modifier ('row') { 170 | flex-direction: row; 171 | } 172 | 173 | ///--------------------------------------------------------------------------- 174 | @include modifier ('column') { 175 | flex-direction: column; 176 | } 177 | 178 | ///--------------------------------------------------------------------------- 179 | @include modifier ('flush') { 180 | line-height: normal; 181 | } 182 | 183 | } 184 | ///--------------------------------------------------------------------------- 185 | ///.table-row__title 186 | @include element ('title') { 187 | @include noselect(); 188 | order : 3; 189 | line-height: normal; 190 | flex : 1 0 auto; 191 | align-items: center; 192 | align-self : stretch; 193 | display : flex; 194 | white-space: nowrap; 195 | } 196 | ///--------------------------------------------------------------------------- 197 | ///.table-row__title 198 | @include element ('subtitle') { 199 | order : 4; 200 | align-self : stretch; 201 | white-space: nowrap; 202 | line-height: normal; 203 | flex : 1 0 auto; 204 | } 205 | ///--------------------------------------------------------------------------- 206 | ///.table-row__body 207 | @include element ('body') { 208 | order : 5; 209 | align-self : stretch; 210 | flex : 1 0 auto; 211 | white-space: normal; 212 | line-height: normal; 213 | } 214 | ///--------------------------------------------------------------------------- 215 | ///.table-row__label 216 | @include element ('label') { 217 | @include noselect(); 218 | order : 0; 219 | align-self: center; 220 | white-space: nowrap; 221 | // Move down slightly to align with icons 222 | position: relative; 223 | top: 2px; 224 | 225 | 226 | @include modifier ('right') { 227 | text-align : left; 228 | order : 4; 229 | margin-right: $inuit-base-spacing-unit; 230 | } 231 | 232 | @include modifier ('left') { 233 | flex: 0 1 80px; 234 | text-align: right; 235 | margin-right: $inuit-base-spacing-unit; 236 | } 237 | } 238 | 239 | 240 | ///--------------------------------------------------------------------------- 241 | ///.table-row__media 242 | @include element ('media') { 243 | flex : 0 1 auto; 244 | order : 1; 245 | display : flex; 246 | align-self : stretch; 247 | justify-content: center; 248 | align-content : center; 249 | flex-direction : column; 250 | margin-left: var(--px-table-row-media-margin, $inuit-base-spacing-unit--small); 251 | margin-right: var(--px-table-row-media-margin, $inuit-base-spacing-unit--small); 252 | ///--------------------------------------------------------------------------- 253 | ///.table-row__media--left 254 | @include modifier ('left') { 255 | order: 0; 256 | } 257 | ///--------------------------------------------------------------------------- 258 | ///.table-row__media--right 259 | @include modifier ('right') { 260 | //margin-right: $inuit-base-spacing-unit; 261 | margin-right: var(--px-table-row-media-margin-right, 0); 262 | order : 9; 263 | } 264 | ///--------------------------------------------------------------------------- 265 | ///.table-row__media--toggle 266 | @include modifier ('toggle') {} 267 | 268 | ///--------------------------------------------------------------------------- 269 | ///.table-row__media--image 270 | @include modifier ('image') { 271 | 272 | img { 273 | display : block; 274 | max-width : 80px; 275 | max-height: 80px; 276 | } 277 | } 278 | } 279 | 280 | .btn { 281 | outline : none; 282 | min-height: 44px; 283 | width : 100%; 284 | } 285 | 286 | } 287 | 288 | // Trumps 289 | $inuit-enable-margins : true; 290 | @import 'px-spacing-design/_trumps.spacing.scss'; 291 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ###GE Software Development License Agreement – General Release 2 | 3 | THIS SOFTWARE LICENSE AGREEMENT (the “License”) describes the rights granted by the General Electric Company, operating through GE Digital (also referred to as “GE Software”), located at 2623 Camino Ramon, San Ramon, CA 94583 (herein referred to as “Licensor”) to any entity (the “Licensee”) receiving a copy of any of the following GE Digital development materials: Predix DevBox; Predix Reference Application (“RefApp”); Predix Dashboard Seed; Predix Px, Predix Security Service redistributable .jar files; Predix Machine redistributable .jar files; and Predix Machine SDK . These materials may include scripts, compiled code, supporting components, and documentation and are collectively referred to as the “Licensed Programs”. Both Licensor and Licensee are referred to hereinafter as a “Party” and collectively as the “Parties” to this License 4 | 5 | ### Section 1 – Conditional Grant. 6 | No Licensee is required to accept this License for use of the Licensed Programs. In the absence of a signed license agreement between Licensor and Licensee specifying alternate terms, any use of the Licensed Programs by the Licensee shall be considered acceptance of these terms. The Licensed Programs are copyrighted and are licensed, not sold, to you. If you are not willing to be bound by the terms of this License, do not install, copy or use the Licensed Programs. If you received this software from any source other than the Licensor, your access to the Licensed Programs is NOT permitted under this License, and you must delete the software and any copies from your systems. 7 | 8 | ###Section 2 – Warranty Disclaimer. 9 | NO WARRANTIES. LICENSOR AND OUR AFFILIATES, RESELLERS, DISTRIBUTORS, AND VENDORS, MAKE NO WARRANTIES, EXPRESS OR IMPLIED, GUARANTEES OR CONDITIONS WITH RESPECT TO USE OF THE LICENSED PROGRAMS. LICENSEE’S USE OF ALL SUCH PROGRAMS ARE AT LICENSEE’S AND CUSTOMERS’ OWN RISK. LICENSOR PROVIDES THE LICENSED PROGRAMS ON AN “AS IS” BASIS “WITH ALL FAULTS” AND “AS AVAILABLE.” LICENSOR DOES NOT GUARANTEE THE ACCURACY OR TIMELINESS OF INFORMATION AVAILABLE FROM, OR PROCESSED BY, THE LICENSED PROGRAMS. TO THE EXTENT PERMITTED UNDER LAW, LICENSOR EXCLUDES ANY IMPLIED WARRANTIES, INCLUDING FOR MERCHANTABILITY, SATISFACTORY QUALITY, FITNESS FOR A PARTICULAR PURPOSE, WORKMANLIKE EFFORT, AND NON-INFRINGEMENT. NO GUARANTEE OF UNINTERRUPTED, TIMELY, SECURE, OR ERROR-FREE OPERATION IS MADE. 10 | 11 | THESE LICENSED PROGRAMS MAY BE USED AS PART OF A DEVELOPMENT ENVIRONMENT, AND MAY BE COMBINED WITH OTHER CODE BY END-USERS. LICENSOR IS NOT ABLE TO GUARANTEE THAT THE LICENSED PROGRAMS WILL OPERATE WITHOUT DEFECTS WHEN USED IN COMBINATION WITH END-USER SOFTWARE. LICENSEE IS ADVISED TO SAFEGUARD IMPORTANT DATA, TO USE CAUTION, AND NOT TO RELY IN ANY WAY ON THE CORRECT FUNCTIONING OR PERFORMANCE OF ANY COMBINATION OF END-USER SOFTWARE AND THE LICENSED PROGRAMS AND/OR ACCOMPANYING MATERIALS. LICENSEE IS ADVISED NOT TO USE ANY COMBINATION OF LICENSED PROGRAMS AND END-USER PROVIDED SOFTWARE IN A PRODUCTION ENVIRONMENT WITHOUT PRIOR SUITABILITY AND DEFECT TESTING. 12 | 13 | ###Section 3 – Feedback. 14 | It is expressly understood, acknowledged and agreed that you may provide GE reasonable suggestions, comments and feedback regarding the Software, including but not limited to usability, bug reports and test results, with respect to Software testing (collectively, "Feedback"). If you provide such Feedback to GE, you shall grant GE the following worldwide, non-exclusive, perpetual, irrevocable, royalty free, fully paid up rights: 15 | 16 | a. to make, use, copy, modify, sell, distribute, sub-license, and create derivative works of, the Feedback as part of any product, technology, service, specification or other documentation developed or offered by GE or any of its affiliates (individually and collectively, "GE Products"); 17 | b. to publicly perform or display, import, broadcast, transmit, distribute, license, offer to sell, and sell, rent, lease or lend copies of the Feedback (and derivative works thereof) as part of any GE Product; 18 | c. solely with respect to Licensee's copyright and trade secret rights, to sublicense to third parties the foregoing rights, including the right to sublicense to further third parties; and 19 | d. to sublicense to third parties any claims of any patents owned or licensable by Licensee that are necessarily infringed by a third party product, technology or service that uses, interfaces, interoperates or communicates with the Feedback or portion thereof incorporated into a GE Product, technology or service. Further, you represent and warrant that your Feedback is not subject to any license terms that would purport to require GE to comply with any additional obligations with respect to any GE Products that incorporate any Feedback. 20 | 21 | ###Section 4 – Reserved 22 | 23 | ###Section 5 – Limitation of Liability. 24 | LIABILITY ARISING UNDER THIS LICENSE, WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE), SHALL BE LIMITED TO DIRECT, OBJECTIVELY MEASURABLE DAMAGES. LICENSOR SHALL HAVE NO LIABILITY TO THE OTHER PARTY OR TO ANY THIRD PARTY, FOR ANY INCIDENTAL, PUNITIVE, INDIRECT, OR CONSEQUENTIAL DAMAGES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. LIABILITY FOR ANY SOFTWARE LICENSED FROM THIRD PARTIES FOR USE WITH THE SERVICES IS EXPLICILTLY DISCLAIMED AND LIMITED TO THE MAXIMUM EXTENT PERMITTED BY LAW. 25 | 26 | Notwithstanding anything to the contrary, the aggregate liability of Licensor and its suppliers under this License shall not exceed the total amounts paid by Licensee to Licensor hereunder during the one-year period immediately preceding the event which gave rise to the claims. 27 | 28 | ###Section 6 – License. 29 | 30 | A. License Grant. Subject to the terms and conditions of this License, Licensor hereby grants Licensee a worldwide, perpetual, royalty-free, non-exclusive license to: 31 | 32 | 1. install the Licensed Programs on Licensee’s premises, and permit Licensee’s users to use the Licensed Programs so installed, solely for Licensee’s own development, testing, demonstration, staging, and production of Licensee’s own software that makes use of the Licensed Programs in a way that adds substantial functionality not present in the Licensed Programs (the result, a “Licensee Application”); 33 | 34 | 2. permit Licensee to permit third-party hosts (“Hosts”) to install the Licensee Application on such Hosts’ respective premises on Licensee’s behalf, and permit Licensee’s users to access and use the Licensed Programs so installed, solely for Licensee’s own development, testing, demonstration, staging and production purposes 35 | 36 | 3. install the Licensee Application on Licensee’s own premises and permit its own users to use the Licensee Application so installed on the same terms as sub-sections (i) and (ii) above. 37 | 38 | B. For the purposes of this License, the right to “use” the Licensed Programs shall include the right to utilize, run, access, store, copy, test or display the Licensed Programs. No right or license is granted or agreed to be granted to disassemble or decompile any Licensed Programs furnished in object code form, and Licensee agrees not to engage in any such conduct unless permitted by law. Reverse engineering of Licensed Programs provided in object code form is prohibited, unless such a right is explicitly granted by any explicit license subject to sub-section (d) below or as a matter of law, and then only to the extent explicitly permitted. Licensor shall have no obligation to support any such reverse engineering, any product or derivative of such reverse engineering, or any use of the Licensed Programs with any modified versions of any of their components under this License. 39 | 40 | C. Licensee shall ensure that any Licensee Applications incorporate the Licensed Programs in such a way as to prevent third parties (other than Hosts) from viewing the code of the Licensed Programs or gaining access to any programmatic interface or other hidden aspect of the Licensed Programs. Licensee shall also restrict distribution of the Licensed Programs, including as part of Licensee Applications, to only those parties who are notified of, and subject to, an enforceable obligation to refrain from any of the prohibited activities listed herein, such as reverse engineering or disassembling the Licensed Programs. 41 | 42 | 43 | D. Use of some open source and third party software applications or components included in or accessed through the Licensed Programs may be subject to other terms and conditions found in a separate license agreement, terms of use or “Notice” file located at the download page. The Licensed Programs are accompanied by additional software components solely to enable the Licensed Programs to operate as designed. Licensee is not permitted to use such additional software independently of the Licensed Programs unless Licensee secures a separate license for use from the named vendor. Do not use any third party code unless you agree with the applicable license terms for that code. 44 | 45 | E. Title. Title to and ownership of the Licensed Programs shall at all times remain with Licensor. 46 | 47 | ###Section 7 – Termination. 48 | 49 | A) The Licensor reserves the right to cease distribution and grant of further licenses to any or all of the Licensed Programs at any time in its sole discretion. 50 | 51 | B) The Licensor reserves the right to at any time and at its sole discretion provide updated versions of any or all of the Licensed Programs that supercede and replace the prior version of that Licensed Program. 52 | 53 | C) Your license rights under Section 6 are effective until terminated as described below: 54 | 55 | i) This license and all rights under it will terminate or cease to be effective without notice if Licensee breaches the terms of the License and does not correct or remedy such breach promptly. 56 | 57 | ii) Notwithstanding the foregoing, Licensee may terminate this License at any time for any reason or no reason by providing the Licensor written notice thereof. 58 | 59 | D) Upon any expiration or termination of this License, the rights and licenses granted to you under this License shall immediately terminate, and you shall immediately cease using and delete the Licensed Programs. Licensee Applications based upon the Licensed Programs (see Section 6(a) above) are not subject to this limitation. 60 | 61 | In the event of any expiration or termination of this Licensee, any Confidentiality provision, disclaimers of GE’s representations and warranties, choice of applicable law and limitations of GE’s liability shall survive. 62 | 63 | ###Section 8 – Applicable Law. 64 | The License shall be governed by and interpreted in accordance with the substantive law of the State of California, U.S.A., excluding its conflicts of law provisions, and by the courts of that state. 65 | -------------------------------------------------------------------------------- /css/px-table-view-sketch-styles.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /css/px-table-view-predix-styles.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /css/px-table-row-sketch-styles.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /px-table-view-sortable-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 45 | 46 | 55 | 56 | 59 | 60 | 352 | 353 | -------------------------------------------------------------------------------- /css/px-table-row-styles.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /px-table-row-swipe-behavior.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 536 | -------------------------------------------------------------------------------- /css/px-table-row-predix-styles.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | --------------------------------------------------------------------------------