From 9e1dbd8a07eb3275afdce2c7f6d00f436a8540c9 Mon Sep 17 00:00:00 2001 From: Vincent Chavez Date: Fri, 28 Apr 2017 12:19:09 -0700 Subject: [PATCH 1/3] Stepper component implimentation --- docs/src/App.vue | 4 + docs/src/pages/components/Stepper.vue | 252 ++++++++++++++++++ docs/src/routes.js | 6 + src/components/mdRadio/mdRadio.scss | 5 +- src/components/mdSpinner/mdSpinner.vue | 2 +- src/components/mdStepper/index.js | 14 + src/components/mdStepper/mdStep.vue | 197 ++++++++++++++ src/components/mdStepper/mdStepHeader.vue | 71 +++++ .../mdStepper/mdStepHeaderContainer.js | 33 +++ src/components/mdStepper/mdStepper.scss | 190 +++++++++++++ src/components/mdStepper/mdStepper.theme | 40 +++ src/components/mdStepper/mdStepper.vue | 238 +++++++++++++++++ src/index.js | 2 + 13 files changed, 1051 insertions(+), 3 deletions(-) create mode 100644 docs/src/pages/components/Stepper.vue create mode 100644 src/components/mdStepper/index.js create mode 100644 src/components/mdStepper/mdStep.vue create mode 100644 src/components/mdStepper/mdStepHeader.vue create mode 100644 src/components/mdStepper/mdStepHeaderContainer.js create mode 100644 src/components/mdStepper/mdStepper.scss create mode 100644 src/components/mdStepper/mdStepper.theme create mode 100644 src/components/mdStepper/mdStepper.vue diff --git a/docs/src/App.vue b/docs/src/App.vue index 4e3a9c8..8d36a2d 100644 --- a/docs/src/App.vue +++ b/docs/src/App.vue @@ -127,6 +127,10 @@ Spinner + + Stepper + + Subheader diff --git a/docs/src/pages/components/Stepper.vue b/docs/src/pages/components/Stepper.vue new file mode 100644 index 0000000..e7576e7 --- /dev/null +++ b/docs/src/pages/components/Stepper.vue @@ -0,0 +1,252 @@ + diff --git a/docs/src/routes.js b/docs/src/routes.js index 4f220ea..91b693b 100644 --- a/docs/src/routes.js +++ b/docs/src/routes.js @@ -28,6 +28,7 @@ const Sidenav = (r) => require.ensure([], () => r(require('./pages/components/Si const Snackbar = (r) => require.ensure([], () => r(require('./pages/components/Snackbar')), 'snackbar'); const SpeedDial = (r) => require.ensure([], () => r(require('./pages/components/SpeedDial')), 'speed-dial'); const Spinner = (r) => require.ensure([], () => r(require('./pages/components/Spinner')), 'spinner'); +const Stepper = (r) => require.ensure([], () => r(require('./pages/components/Stepper')), 'stepper'); const Subheader = (r) => require.ensure([], () => r(require('./pages/components/Subheader')), 'subheader'); const Switch = (r) => require.ensure([], () => r(require('./pages/components/Switch')), 'switch'); const Table = (r) => require.ensure([], () => r(require('./pages/components/Table')), 'table'); @@ -183,6 +184,11 @@ const components = [ name: 'components:spinner', component: Spinner }, + { + path: '/components/stepper', + name: 'components:stepper', + component: Stepper + }, { path: '/components/subheader', name: 'components:subheader', diff --git a/src/components/mdRadio/mdRadio.scss b/src/components/mdRadio/mdRadio.scss index 2fa6977..06fefa0 100644 --- a/src/components/mdRadio/mdRadio.scss +++ b/src/components/mdRadio/mdRadio.scss @@ -2,6 +2,7 @@ $radio-size: 20px; $radio-ripple-size: 48px; +$radio-touch-size: 48px; .md-radio { width: auto; @@ -19,8 +20,8 @@ $radio-ripple-size: 48px; transition: $swift-ease-out; &:before { - width: $checkbox-touch-size; - height: $checkbox-touch-size; + width: $radio-touch-size; + height: $radio-touch-size; position: absolute; top: 50%; left: 50%; diff --git a/src/components/mdSpinner/mdSpinner.vue b/src/components/mdSpinner/mdSpinner.vue index 2364d96..253b9fe 100644 --- a/src/components/mdSpinner/mdSpinner.vue +++ b/src/components/mdSpinner/mdSpinner.vue @@ -2,7 +2,7 @@ diff --git a/src/components/mdStepper/index.js b/src/components/mdStepper/index.js new file mode 100644 index 0000000..cbccbf3 --- /dev/null +++ b/src/components/mdStepper/index.js @@ -0,0 +1,14 @@ +import mdStepper from './mdStepper.vue'; +import mdStep from './mdStep.vue'; +import mdStepHeaderContainer from './mdStepHeaderContainer.js'; +import mdStepHeader from './mdStepHeader.vue'; +import mdStepperTheme from './mdStepper.theme'; + +export default function install(Vue) { + Vue.component('md-stepper', mdStepper); + Vue.component('md-step', mdStep); + Vue.component('md-step-header-container', mdStepHeaderContainer); + Vue.component('md-step-header', mdStepHeader); + + Vue.material.styles.push(mdStepperTheme); +} diff --git a/src/components/mdStepper/mdStep.vue b/src/components/mdStepper/mdStep.vue new file mode 100644 index 0000000..1ded96a --- /dev/null +++ b/src/components/mdStepper/mdStep.vue @@ -0,0 +1,197 @@ + + + diff --git a/src/components/mdStepper/mdStepHeader.vue b/src/components/mdStepper/mdStepHeader.vue new file mode 100644 index 0000000..9870079 --- /dev/null +++ b/src/components/mdStepper/mdStepHeader.vue @@ -0,0 +1,71 @@ + + + diff --git a/src/components/mdStepper/mdStepHeaderContainer.js b/src/components/mdStepper/mdStepHeaderContainer.js new file mode 100644 index 0000000..37df23e --- /dev/null +++ b/src/components/mdStepper/mdStepHeaderContainer.js @@ -0,0 +1,33 @@ +import uniqueId from '../../core/utils/uniqueId'; + +export default { + functional: true, + props: { + mdVertical: { + type: Boolean, + default: false + } + }, + render(createElement, { children, props }) { + const insertDividerIntoArray = (arr) => { + return arr.reduce((result, element, index, array) => { + + result.push(element); + + if (index < array.length - 1) { + var mdDivider = createElement('md-divider', { key: 'divider-' + uniqueId() }); + + result.push(mdDivider); + } + + return result; + }, []); + }; + + if (!props.mdVertical) { + children = insertDividerIntoArray(children); + } + + return createElement('div', { class: 'md-steps-navigation-container'}, children); + } +}; diff --git a/src/components/mdStepper/mdStepper.scss b/src/components/mdStepper/mdStepper.scss new file mode 100644 index 0000000..dd312a7 --- /dev/null +++ b/src/components/mdStepper/mdStepper.scss @@ -0,0 +1,190 @@ +@import '../../core/stylesheets/variables.scss'; +@import '../../core/stylesheets/mixins.scss'; + +.md-stepper { + display: flex; + flex-flow: column; + position: relative; + width: 100%; + + .md-step-header { + background: none; + border: 0; + cursor: pointer; + flex-shrink: 0; + font-family: inherit; + font-size: 12px; + font-weight: 500; + margin: 0; + max-height: 72px; + padding: 24px; + position: relative; + transition: $swift-ease-out; + + .md-step-icons, .md-step-titles { + display: inline-block; + vertical-align: middle; + } + + &.md-has-sub-message { + padding: 15px 24px; + + .md-step-title { + margin-bottom: -4px; + } + } + + .md-step-icon { + border-radius: 50%; + font-size: 12px; + height: 24px; + line-height: 24px; + margin-right: 8px; + min-width: 24px; + padding: 0px 6px; + pointer-events: none; + user-select: none; + width: 24px; + } + + .md-step-number { + border-radius: 50%; + display: inline-block; + font-size: 12px; + margin-right: 8px; + width: 24px; + + span { + display: block; + line-height: 24px; + text-align: center; + } + } + + .md-step-title { + font-size: inherit; + } + + &.md-disabled { + cursor: default; + pointer-events: none; + user-select: none; + -webkit-user-drag: none; + } + } + .md-steps-navigation { + display: flex; + height: 72px; + min-height: 72px; + overflow: hidden; + position: relative; + transition: $swift-ease-out; + z-index: 1; + + &.md-alternate-labels { + height: 104px; + min-height: 104px; + } + + .md-steps-navigation-container { + display: flex; + justify-content: space-between; + width: 100%; + + @include layout-small-and-up { + margin-bottom: -15px; + } + + .md-divider { + margin: 36px 0; + position: relative; + width: 100%; + } + + .md-step-header { + &.md-alternate-labels { + max-height: 104px; + text-align: center; + + &.md-has-sub-message { + padding: 24px; + } + + .md-step-icon { + padding: 0; + } + + .md-step-icons, .md-step-titles { + display: block; + } + + .md-step-titles { + margin-top: 10px; + } + } + } + } + } + + .md-steps-container { + height: 0; + overflow: hidden; + position: relative; + width: 100%; + + .md-steps-wrapper { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translate3d(0, 0, 0); + transition: transform $swift-ease-out-duration $swift-ease-out-timing-function; + width: 9999em; + + .md-step { + left: 0; + padding: 16px; + position: absolute; + right: 0; + top: 0; + + .md-step-content { + padding: 16px; + font-size: 14px; + line-height: 22px; + + &:last-child { + padding-bottom: 24px; + } + } + } + } + } + + .md-steps-vertical-container { + .md-step { + .md-step-header { + padding-bottom: 8px; + } + &:not(:first-of-type) { + .md-step-header { + padding-top: 8px; + } + } + + .md-step-content { + margin: 0 24px 0 34px; + padding-bottom: 32px; + padding-left: 24px; + padding-top: 8px; + } + + &:not(:last-of-type) { + .md-step-content { + border-left: 1px solid #BDBDBD; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/mdStepper/mdStepper.theme b/src/components/mdStepper/mdStepper.theme new file mode 100644 index 0000000..f9b9c6c --- /dev/null +++ b/src/components/mdStepper/mdStepper.theme @@ -0,0 +1,40 @@ +.THEME_NAME { + &.md-stepper { + .md-step-header { + .md-step-icon, + .md-step-number { + color: #{'BACKGROUND-CONTRAST'}; + background-color: #bdbdbd; + } + &.md-primary, &.md-active { + .md-step-icon, + .md-step-number { + color: #{'PRIMARY-CONTRAST'}; + background-color: #{'PRIMARY-COLOR'}; + } + } + &.md-accent { + .md-step-icon, + .md-step-number { + color: #{'ACCENT-CONTRAST'}; + background-color: #{'ACCENT-COLOR'}; + } + } + &.md-warn { + .md-step-icon, + .md-step-number { + color: #{'WARN-CONTRAST'}; + background-color: #{'WARN-COLOR'}; + } + } + &.md-disabled { + color: #bdbdbd; + .md-step-icon, + .md-step-number { + color: white; + background-color: #bdbdbd; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/mdStepper/mdStepper.vue b/src/components/mdStepper/mdStepper.vue new file mode 100644 index 0000000..6844af8 --- /dev/null +++ b/src/components/mdStepper/mdStepper.vue @@ -0,0 +1,238 @@ + + + + + diff --git a/src/index.js b/src/index.js index 9a0f757..ff90a7b 100644 --- a/src/index.js +++ b/src/index.js @@ -23,6 +23,7 @@ import MdSidenav from './components/mdSidenav'; import MdSnackbar from './components/mdSnackbar'; import MdSpeedDial from './components/mdSpeedDial'; import MdSpinner from './components/mdSpinner'; +import MdStepper from './components/mdStepper'; import MdSubheader from './components/mdSubheader'; import MdSwitch from './components/mdSwitch'; import MdTable from './components/mdTable'; @@ -57,6 +58,7 @@ const options = { MdSnackbar, MdSpeedDial, MdSpinner, + MdStepper, MdSubheader, MdSwitch, MdTable, From 0ebc93768ff81c879831709c5e3d7f294ab140ad Mon Sep 17 00:00:00 2001 From: Vincent Chavez Date: Fri, 19 May 2017 09:39:32 -0700 Subject: [PATCH 2/3] update merge conflict --- src/components/mdSpinner/mdSpinner.vue | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/mdSpinner/mdSpinner.vue b/src/components/mdSpinner/mdSpinner.vue index 1fb8220..253b9fe 100644 --- a/src/components/mdSpinner/mdSpinner.vue +++ b/src/components/mdSpinner/mdSpinner.vue @@ -2,11 +2,7 @@ From a62ca9c1323f9a38f03a977ab5441cd97435046e Mon Sep 17 00:00:00 2001 From: Vincent Chavez Date: Fri, 19 May 2017 09:41:59 -0700 Subject: [PATCH 3/3] Other merge conflicts --- README.md | 8 +------- package.json | 5 ----- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/README.md b/README.md index 8c0cb3d..3bac49d 100644 --- a/README.md +++ b/README.md @@ -10,19 +10,13 @@ Downloads -<<<<<<< HEAD Version -======= - - - Version - + Version ->>>>>>> 369f3f0e392dd4fcc2c4e26e80a2e36d6dcf54cd diff --git a/package.json b/package.json index 061879f..78507e1 100644 --- a/package.json +++ b/package.json @@ -69,14 +69,9 @@ "eslint-plugin-html": "^2.0.1", "eventsource-polyfill": "^0.9.6", "express": "^4.14.1", -<<<<<<< HEAD - "extract-text-webpack-plugin": "beta", - "friendly-errors-webpack-plugin": "^1.3.1", -======= "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.10.0", "friendly-errors-webpack-plugin": "^1.1.3", ->>>>>>> 369f3f0e392dd4fcc2c4e26e80a2e36d6dcf54cd "highlight.js": "^9.9.0", "html-webpack-plugin": "^2.28.0", "node-sass": "^4.5.0",