From 88660316cb9df93cd6de4a093a086d7d82ce500d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20TOUZY?= Date: Mon, 12 Dec 2016 02:55:37 +0100 Subject: [PATCH 01/42] pass $event to on click inside md-list-item (#180) --- src/components/mdList/mdListItem.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/mdList/mdListItem.vue b/src/components/mdList/mdListItem.vue index d277338..689b045 100644 --- a/src/components/mdList/mdListItem.vue +++ b/src/components/mdList/mdListItem.vue @@ -16,8 +16,8 @@ let listItemSpec = { staticClass: 'md-list-item', on: { - click: () => { - this.$emit('click'); + click: ($event) => { + this.$emit('click', $event); } } }; From bf06ffce6b781fa537f03e8088dd9eaa3ac7e3be Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 12 Dec 2016 02:56:44 -0200 Subject: [PATCH 02/42] create spinner #20 (#186) --- docs/src/App.vue | 4 + docs/src/config.js | 12 +- docs/src/pages/components/Spinner.vue | 225 +++++++++++++++++++++++ docs/src/routes.js | 6 + src/components/mdSpinner/index.js | 8 + src/components/mdSpinner/mdSpinner.scss | 97 ++++++++++ src/components/mdSpinner/mdSpinner.theme | 20 ++ src/components/mdSpinner/mdSpinner.vue | 61 ++++++ src/index.js | 2 + 9 files changed, 429 insertions(+), 6 deletions(-) create mode 100644 docs/src/pages/components/Spinner.vue create mode 100644 src/components/mdSpinner/index.js create mode 100644 src/components/mdSpinner/mdSpinner.scss create mode 100644 src/components/mdSpinner/mdSpinner.theme create mode 100644 src/components/mdSpinner/mdSpinner.vue diff --git a/docs/src/App.vue b/docs/src/App.vue index 8a1b9d4..50c76e2 100644 --- a/docs/src/App.vue +++ b/docs/src/App.vue @@ -101,6 +101,10 @@ Sidenav + + Spinner + + Subheader diff --git a/docs/src/config.js b/docs/src/config.js index 3f5a58f..c43949d 100644 --- a/docs/src/config.js +++ b/docs/src/config.js @@ -8,6 +8,10 @@ Vue.material.theme.registerAll({ primary: 'blue', accent: 'pink' }, + blue: { + primary: 'blue', + accent: 'pink' + }, indigo: { primary: 'indigo', accent: 'pink' @@ -21,12 +25,8 @@ Vue.material.theme.registerAll({ accent: 'blue' }, orange: { - primary: 'orange', - accent: 'green' - }, - blue: { - primary: 'blue', - accent: 'pink' + primary: 'deep-orange', + accent: 'purple' }, green: { primary: 'green', diff --git a/docs/src/pages/components/Spinner.vue b/docs/src/pages/components/Spinner.vue new file mode 100644 index 0000000..9ed8315 --- /dev/null +++ b/docs/src/pages/components/Spinner.vue @@ -0,0 +1,225 @@ + + + + + diff --git a/docs/src/routes.js b/docs/src/routes.js index 31898f5..34450f3 100644 --- a/docs/src/routes.js +++ b/docs/src/routes.js @@ -21,6 +21,7 @@ import Radio from './pages/components/Radio'; import InkRipple from './pages/components/InkRipple'; import Select from './pages/components/Select'; import Sidenav from './pages/components/Sidenav'; +import Spinner from './pages/components/Spinner'; import Subheader from './pages/components/Subheader'; import Switch from './pages/components/Switch'; import Table from './pages/components/Table'; @@ -141,6 +142,11 @@ const components = [ name: 'components:sidenav', component: Sidenav }, + { + path: '/components/spinner', + name: 'components:spinner', + component: Spinner + }, { path: '/components/switch', name: 'components:switch', diff --git a/src/components/mdSpinner/index.js b/src/components/mdSpinner/index.js new file mode 100644 index 0000000..a18138b --- /dev/null +++ b/src/components/mdSpinner/index.js @@ -0,0 +1,8 @@ +import mdSpinner from './mdSpinner.vue'; +import mdSpinnerTheme from './mdSpinner.theme'; + +export default function install(Vue) { + Vue.component('md-spinner', Vue.extend(mdSpinner)); + + Vue.material.styles.push(mdSpinnerTheme); +} diff --git a/src/components/mdSpinner/mdSpinner.scss b/src/components/mdSpinner/mdSpinner.scss new file mode 100644 index 0000000..1fe84e0 --- /dev/null +++ b/src/components/mdSpinner/mdSpinner.scss @@ -0,0 +1,97 @@ +@import '../../core/stylesheets/variables.scss'; + +.md-spinner { + display: inline-block; + position: relative; + pointer-events: none; + will-change: transform, opacity; + + &.md-indeterminate { + .md-spinner-draw { + animation: spinner-rotate 1.9s linear infinite; + transform: rotate(0deg) translateZ(0); + } + + .md-spinner-path { + stroke-dasharray: 2, 200; + animation: spinner-dash 1.425s ease-in-out infinite; + } + } + + &.md-spinner-leave-active { + opacity: 0; + transform: scale(.9) translateZ(0); + transition: $swift-ease-out; + } + + &:not(.md-indeterminate) { + &.md-spinner-enter-active { + transition-duration: 1.8s; + + .md-spinner-draw { + animation: spinner-initial-rotate 1.79s $swift-ease-out-timing-function infinite; + } + } + } +} + +.md-spinner-draw { + width: 100%; + height: 100%; + margin: auto; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + transform: rotate(270deg) translateZ(0); + transform-origin: center center; + will-change: transform, opacity; +} + +.md-spinner-path { + fill: none; + stroke-dashoffset: 0; + stroke-miterlimit: 10; + stroke-width: 3.2; + transition: $swift-ease-out; +} + +@keyframes spinner-rotate { + to { + transform: rotate(360deg) translateZ(0); + } +} + +@keyframes spinner-initial-rotate { + 0% { + opacity: 0; + transform: rotate(-90deg) translateZ(0); + } + + 10% { + opacity: 1; + } + + 100% { + opacity: 1; + transform: rotate(270deg) translateZ(0); + } +} + +@keyframes spinner-dash { + 0% { + stroke-dasharray: 2, 200; + stroke-dashoffset: 0; + } + + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} diff --git a/src/components/mdSpinner/mdSpinner.theme b/src/components/mdSpinner/mdSpinner.theme new file mode 100644 index 0000000..2478a1b --- /dev/null +++ b/src/components/mdSpinner/mdSpinner.theme @@ -0,0 +1,20 @@ +.THEME_NAME { + .md-spinner, + &.md-spinner { + .md-spinner-path { + stroke: #{'PRIMARY-COLOR'} + } + + &.md-accent { + .md-spinner-path { + stroke: #{'ACCENT-COLOR'} + } + } + + &.md-warn { + .md-spinner-path { + stroke: #{'WARN-COLOR'} + } + } + } +} diff --git a/src/components/mdSpinner/mdSpinner.vue b/src/components/mdSpinner/mdSpinner.vue new file mode 100644 index 0000000..6a03227 --- /dev/null +++ b/src/components/mdSpinner/mdSpinner.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/src/index.js b/src/index.js index bc8fb4d..2d575de 100644 --- a/src/index.js +++ b/src/index.js @@ -15,6 +15,7 @@ import MdMenu from './components/mdMenu'; import MdRadio from './components/mdRadio'; import MdSelect from './components/mdSelect'; import MdSidenav from './components/mdSidenav'; +import MdSpinner from './components/mdSpinner'; import MdSubheader from './components/mdSubheader'; import MdSwitch from './components/mdSwitch'; import MdTable from './components/mdTable'; @@ -41,6 +42,7 @@ const options = { MdRadio, MdSelect, MdSidenav, + MdSpinner, MdSubheader, MdSwitch, MdTable, From 53d3a580197922e4b25e8d68f1bb9ed9c398ab08 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 12 Dec 2016 03:10:09 -0200 Subject: [PATCH 03/42] create empty layout module --- docs/src/App.vue | 9 ++++--- docs/src/pages/ui-elements/GridSystem.vue | 9 ------- docs/src/pages/ui-elements/Layout.vue | 29 +++++++++++++++++++++++ docs/src/routes.js | 8 +++---- src/components/mdLayout/index.js | 5 ++++ src/components/mdLayout/mdLayout.scss | 6 +++++ src/components/mdLayout/mdLayout.vue | 15 ++++++++++++ src/components/mdLayout/tag.js | 8 +++++++ src/index.js | 2 ++ 9 files changed, 73 insertions(+), 18 deletions(-) delete mode 100644 docs/src/pages/ui-elements/GridSystem.vue create mode 100644 docs/src/pages/ui-elements/Layout.vue create mode 100644 src/components/mdLayout/index.js create mode 100644 src/components/mdLayout/mdLayout.scss create mode 100644 src/components/mdLayout/mdLayout.vue create mode 100644 src/components/mdLayout/tag.js diff --git a/docs/src/App.vue b/docs/src/App.vue index 50c76e2..bd33026 100644 --- a/docs/src/App.vue +++ b/docs/src/App.vue @@ -137,19 +137,18 @@ - Typography - - + diff --git a/docs/src/pages/ui-elements/GridSystem.vue b/docs/src/pages/ui-elements/GridSystem.vue deleted file mode 100644 index b2dce1c..0000000 --- a/docs/src/pages/ui-elements/GridSystem.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/docs/src/pages/ui-elements/Layout.vue b/docs/src/pages/ui-elements/Layout.vue new file mode 100644 index 0000000..5739eb2 --- /dev/null +++ b/docs/src/pages/ui-elements/Layout.vue @@ -0,0 +1,29 @@ + + + diff --git a/docs/src/routes.js b/docs/src/routes.js index 34450f3..5024f20 100644 --- a/docs/src/routes.js +++ b/docs/src/routes.js @@ -32,7 +32,7 @@ import Whiteframe from './pages/components/Whiteframe'; /* UI Elements */ import Typography from './pages/ui-elements/Typography'; -import GridSystem from './pages/ui-elements/GridSystem'; +import Layout from './pages/ui-elements/Layout'; /* Themes */ import Configuration from './pages/themes/Configuration'; @@ -214,9 +214,9 @@ const uiElements = [ component: Typography }, { - path: '/ui-elements/grid-system', - name: 'ui-elements:grid-system', - component: GridSystem + path: '/ui-elements/layout', + name: 'ui-elements:layout', + component: Layout } ]; diff --git a/src/components/mdLayout/index.js b/src/components/mdLayout/index.js new file mode 100644 index 0000000..5f4676b --- /dev/null +++ b/src/components/mdLayout/index.js @@ -0,0 +1,5 @@ +import mdLayout from './mdLayout.vue'; + +export default function install(Vue) { + Vue.component('md-layout', Vue.extend(mdLayout)); +} diff --git a/src/components/mdLayout/mdLayout.scss b/src/components/mdLayout/mdLayout.scss new file mode 100644 index 0000000..6afd2ef --- /dev/null +++ b/src/components/mdLayout/mdLayout.scss @@ -0,0 +1,6 @@ +@import '../../core/stylesheets/variables.scss'; + +.md-layout { + display: flex; + flex: 1; +} diff --git a/src/components/mdLayout/mdLayout.vue b/src/components/mdLayout/mdLayout.vue new file mode 100644 index 0000000..4dddff2 --- /dev/null +++ b/src/components/mdLayout/mdLayout.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/components/mdLayout/tag.js b/src/components/mdLayout/tag.js new file mode 100644 index 0000000..5a9ad50 --- /dev/null +++ b/src/components/mdLayout/tag.js @@ -0,0 +1,8 @@ +export default { + props: { + mdTag: { + type: String, + default: 'div' + } + } +}; diff --git a/src/index.js b/src/index.js index 2d575de..d2d377a 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,7 @@ import MdDialog from './components/mdDialog'; import MdDivider from './components/mdDivider'; import MdIcon from './components/mdIcon'; import MdInputContainer from './components/mdInputContainer'; +import MdLayout from './components/mdLayout'; import MdList from './components/mdList'; import MdMenu from './components/mdMenu'; import MdRadio from './components/mdRadio'; @@ -37,6 +38,7 @@ const options = { MdDivider, MdIcon, MdInputContainer, + MdLayout, MdList, MdMenu, MdRadio, From e2333e14e0e53675de55fe67e5b90d2a440ec95e Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 12 Dec 2016 03:10:54 -0200 Subject: [PATCH 04/42] remove mixin --- src/components/mdLayout/mdLayout.vue | 9 ++++++--- src/components/mdLayout/tag.js | 8 -------- 2 files changed, 6 insertions(+), 11 deletions(-) delete mode 100644 src/components/mdLayout/tag.js diff --git a/src/components/mdLayout/mdLayout.vue b/src/components/mdLayout/mdLayout.vue index 4dddff2..cc518a5 100644 --- a/src/components/mdLayout/mdLayout.vue +++ b/src/components/mdLayout/mdLayout.vue @@ -1,10 +1,13 @@ diff --git a/src/components/mdAvatar/mdAvatar.theme b/src/components/mdAvatar/mdAvatar.theme index a68c820..39cfa94 100644 --- a/src/components/mdAvatar/mdAvatar.theme +++ b/src/components/mdAvatar/mdAvatar.theme @@ -1,5 +1,4 @@ .THEME_NAME { - .md-avatar, &.md-avatar { &.md-primary { &.md-avatar-icon { diff --git a/src/components/mdAvatar/mdAvatar.vue b/src/components/mdAvatar/mdAvatar.vue index 103df3d..ede126d 100644 --- a/src/components/mdAvatar/mdAvatar.vue +++ b/src/components/mdAvatar/mdAvatar.vue @@ -1,7 +1,15 @@ + + diff --git a/src/components/mdBottomBar/mdBottomBar.theme b/src/components/mdBottomBar/mdBottomBar.theme index e8c0ae8..4311b36 100644 --- a/src/components/mdBottomBar/mdBottomBar.theme +++ b/src/components/mdBottomBar/mdBottomBar.theme @@ -1,5 +1,4 @@ .THEME_NAME { - .md-bottom-bar, &.md-bottom-bar { &.md-fixed { background-color: #{'BACKGROUND-COLOR'}; diff --git a/src/components/mdBottomBar/mdBottomBar.vue b/src/components/mdBottomBar/mdBottomBar.vue index 1d50e77..f98836e 100644 --- a/src/components/mdBottomBar/mdBottomBar.vue +++ b/src/components/mdBottomBar/mdBottomBar.vue @@ -1,5 +1,5 @@ @@ -7,10 +7,13 @@ diff --git a/src/components/mdButtonToggle/mdButtonToggle.theme b/src/components/mdButtonToggle/mdButtonToggle.theme index 9bed785..795b1b1 100644 --- a/src/components/mdButtonToggle/mdButtonToggle.theme +++ b/src/components/mdButtonToggle/mdButtonToggle.theme @@ -1,5 +1,4 @@ .THEME_NAME { - .md-button-toggle, &.md-button-toggle { .md-button { &:after { diff --git a/src/components/mdButtonToggle/mdButtonToggle.vue b/src/components/mdButtonToggle/mdButtonToggle.vue index 6b9bc3a..70ad2d2 100644 --- a/src/components/mdButtonToggle/mdButtonToggle.vue +++ b/src/components/mdButtonToggle/mdButtonToggle.vue @@ -1,5 +1,5 @@ @@ -7,12 +7,15 @@ diff --git a/src/components/mdInputContainer/mdInputContainer.theme b/src/components/mdInputContainer/mdInputContainer.theme index 3c73546..6f95fb1 100644 --- a/src/components/mdInputContainer/mdInputContainer.theme +++ b/src/components/mdInputContainer/mdInputContainer.theme @@ -1,5 +1,4 @@ .THEME_NAME { - .md-input-container, &.md-input-container { &.md-input-invalid { &:after { diff --git a/src/components/mdInputContainer/mdInputContainer.vue b/src/components/mdInputContainer/mdInputContainer.vue index 6ed0b9f..6795883 100644 --- a/src/components/mdInputContainer/mdInputContainer.vue +++ b/src/components/mdInputContainer/mdInputContainer.vue @@ -1,5 +1,5 @@