feat: Further theme work

dsl101 · Jul 25, 2016 · 4b7d747 · 4b7d747
1 parent d417274
commit 4b7d747
Show file tree

Hide file tree

Showing 38 changed files with 164 additions and 196 deletions.
diff --git a/.codeclimate.yml b/.codeclimate.yml
@@ -4,5 +4,5 @@ exclude_paths:
   - "node_modules/*"
   - "dist/*"
   - "test/*"
-  - "src/lib/core/environment/environment.js"
+  - "src/lib/core/platform/platform.js"
   - "preview/*"
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,6 +6,9 @@ module.exports = {
   env: {
     browser: true
   },
+  globals: {
+    '__THEME': true
+  },
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
   extends: 'standard',
   // required to lint *.vue files

diff --git a/build/git-hooks/pre-commit b/build/git-hooks/pre-commit
diff --git a/build/script.build.stylus.js b/build/script.build.stylus.js
@@ -2,7 +2,14 @@ var
   fs = require('fs'),
   path = require('path'),
   stylus = require('stylus'),
-  themes = ['ios', 'mat']
+  themes = ['ios', 'mat'],
+  version = process.env.VERSION || require('../package.json').version,
+  banner =
+    '/*!\n' +
+    ' * Quasar Framework v' + version + '\n' +
+    ' * (c) ' + new Date().getFullYear() + ' Razvan Stoenescu\n' +
+    ' * Released under the MIT License.\n' +
+    ' */\n'
 
 themes.forEach(function (theme) {
   var
@@ -26,7 +33,7 @@ function readFile (file) {
 }
 
 function compile (src) {
-  var data = ''
+  var data = banner
 
   src.forEach(function (file) {
     data += readFile(file) + '\n'
@@ -36,7 +43,7 @@ function compile (src) {
     // remove imports
     .replace(/@import '[^']+'\n/g, '')
     // remove comments
-    .replace(/(\/\*[\w'-\.,`\s\r\n\*]*\*\/)|(\/\/[\w\s']*)/g, '')
+    .replace(/(\/\*[\w'-\.,`\s\r\n\*@]*\*\/)|(\/\/[^\n]*)/g, '')
     // remove unnecessary newlines
     .replace(/\n[\n]+/g, '\n')
 }

diff --git a/build/webpack.dev.config.js b/build/webpack.dev.config.js
@@ -4,7 +4,8 @@ var
   utils = require('./utils'),
   HtmlWebpackPlugin = require('html-webpack-plugin'),
   projectRoot = path.resolve(__dirname, '../'),
-  entry = './dev/app.entry.js',
+  entry = './dev/app.js',
+  theme = process.argv[2] || 'mat',
   plugins = []
 
 if (process.env.NODE_ENV !== 'production') {
@@ -26,7 +27,7 @@ module.exports = {
     extensions: ['', '.js', '.vue'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
-      'quasar-framework': path.resolve(__dirname, '../src/index.es6'),
+      'quasar': path.resolve(__dirname, '../src/index.es6'),
       'asset': path.resolve(__dirname, '../dev/assets'),
       'component': path.resolve(__dirname, '../dev/components'),
       'view': path.resolve(__dirname, '../dev/views')
@@ -39,7 +40,8 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: process.env.PROD ? '"production"' : '"development"'
-      }
+      },
+      '__THEME': '"' + (process.argv[2] || 'mat') + '"'
     }),
     new webpack.ProvidePlugin({
       $: 'jquery',
@@ -57,7 +59,7 @@ module.exports = {
     })
   ]),
   module: {
-    preLoaders: [
+    /* preLoaders: [
       {
         test: /\.vue$/,
         loader: 'eslint',
@@ -70,7 +72,7 @@ module.exports = {
         include: projectRoot,
         exclude: /node_modules/
       }
-    ],
+    ],*/
     loaders: [utils.styleLoaders()].concat([
       {
         test: /\.vue$/,

diff --git a/dev/app.entry.js → dev/app.js b/dev/app.entry.js → dev/app.js
@@ -8,15 +8,16 @@ import 'velocity-animate/velocity.ui'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import VueTouch from 'vue-touch'
-import Quasar from 'quasar-framework'
+import Quasar from 'quasar'
+
+Quasar.theme.set(__THEME)
+require('./themes/app.' + __THEME + '.styl')
 
 Vue.use(VueRouter)
 Vue.use(VueTouch)
 Vue.use(Quasar)
 
-import '../src/themes/quasar.mat.styl'
-
-var router = new VueRouter()
+let router = new VueRouter()
 
 router.map({
   '/': {
@@ -49,10 +50,6 @@ router.map({
   }
 })
 
-/*
-quasar.boot.app(() => {
+Quasar.start(() => {
   router.start(Vue.extend({}), '#quasar-app')
 })
-*/
-
-router.start(Vue.extend({}), '#quasar-app')
diff --git a/dev/index.html b/dev/index.html
@@ -8,7 +8,7 @@
 
     <title>Quasar App</title>
   </head>
-  <body>
+  <body class="">
     <div id="quasar-app">
       <router-view></router-view>
     </div>

diff --git a/dev/themes/app.ios.styl b/dev/themes/app.ios.styl
diff --git a/dev/themes/app.mat.styl b/dev/themes/app.mat.styl
diff --git a/dev/themes/app.variables.styl b/dev/themes/app.variables.styl
diff --git a/dev/views/action-sheet.vue b/dev/views/action-sheet.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { ActionSheet } from 'quasar-framework'
+import { ActionSheet } from 'quasar'
 
 export default {
   methods: {

diff --git a/dev/views/card.vue b/dev/views/card.vue
@@ -236,7 +236,7 @@
 </template>
 
 <script>
-import { Notify } from 'quasar-framework'
+import { Notify } from 'quasar'
 
 export default {
   methods: {

diff --git a/dev/views/dialog.vue b/dev/views/dialog.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { Dialog } from 'quasar-framework'
+import { Dialog } from 'quasar'
 
 export default {
   methods: {

diff --git a/dev/views/loading.vue b/dev/views/loading.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { Loading } from 'quasar-framework'
+import { Loading } from 'quasar'
 
 export default {
   methods: {

diff --git a/dev/views/notify.vue b/dev/views/notify.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import { Notify, Utils } from 'quasar-framework'
+import { Notify, Utils } from 'quasar'
 
 export default {
   data () {

diff --git a/dev/views/tree.vue b/dev/views/tree.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { Notify } from 'quasar-framework'
+import { Notify } from 'quasar'
 
 export default {
   data () {

diff --git a/dev/views/typography.vue b/dev/views/typography.vue
@@ -87,7 +87,7 @@
 </template>
 
 <script>
-import { AppFullscreen, Events } from 'quasar-framework'
+import { AppFullscreen, Events } from 'quasar'
 
 export default {
   data () {

diff --git a/package.json b/package.json
@@ -7,7 +7,6 @@
     "dist"
   ],
   "scripts": {
-    "install": "ln -s ../../build/git-hooks/pre-commit .git/hooks/pre-commit",
     "deploy": "bash build/shell.deploy.sh",
     "test": "bash build/shell.test.sh",
     "e2e": "BABEL_ENV=development NODE_ENV=production bash build/shell.test.e2e.sh",
@@ -58,6 +57,7 @@
     "babel-preset-es2015-rollup": "^1.1.1",
     "babel-preset-stage-2": "^6.0.0",
     "babel-runtime": "^6.0.0",
+    "bundle-loader": "^0.5.4",
     "casperjs": "^1.1.2",
     "codecov.io": "^0.1.6",
     "colors": "^1.1.2",

diff --git a/src/components/action-sheet/action-sheet.ios.styl b/src/components/action-sheet/action-sheet.ios.styl
@@ -0,0 +1,33 @@
+$action-sheet-background-color ?= $ios-primary
+$action-sheet-border-radius    ?= 13px
+$action-sheet-max-width        ?= 95%
+$action-sheet-margin-bottom    ?= .6rem
+$action-sheet-font-size        ?= 1.5rem
+$action-sheet-avatar-padding   ?= .6rem 1.1rem
+
+.quasar-action-sheet-gallery
+  .column
+    padding $action-sheet-avatar-padding
+    transition all .3s
+    &:hover
+      background-color $list-divider-color
+  i, img
+    font-size 2rem
+    margin-bottom 5px
+  .avatar
+    width 50px
+    height 50px
+
+  .quasar-action-sheet
+    border-radius $action-sheet-border-radius
+    background-color $action-sheet-background-color
+    max-width $action-sheet-max-width
+    margin-left auto
+    margin-right auto
+    margin-bottom $action-sheet-margin-bottom
+    overflow hidden
+
+    .list
+      margin 0
+    .item-link
+      font-size $action-sheet-font-size
diff --git a/src/components/action-sheet/action-sheet.js b/src/components/action-sheet/action-sheet.js
@@ -1,6 +1,6 @@
 import $ from 'jquery'
 import Modal from '../modal/modal'
-import theme from '../../themes/themes'
+import { current as theme } from '../../theme'
 
 import matTemplate from './action-sheet-material.html'
 import iosTemplate from './action-sheet-ios.html'

diff --git a/src/components/action-sheet/action-sheet.mat.styl b/src/components/action-sheet/action-sheet.mat.styl
@@ -0,0 +1,14 @@
+$action-sheet-avatar-padding   ?= .6rem 1.2rem
+
+.quasar-action-sheet-gallery
+  .column
+    padding $action-sheet-avatar-padding
+    transition all .3s
+    &:hover
+      background-color $list-divider-color
+  i, img
+    font-size 2rem
+    margin-bottom 5px
+  .avatar
+    width 50px
+    height 50px
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -1,6 +1,6 @@
 import $ from 'jquery'
 import { Vue } from '../../install'
-import theme from '../../themes/themes'
+import { current as theme } from '../../theme'
 
 const
   target = $('#quasar-app'),

diff --git a/src/fastclick.js b/src/fastclick.js
@@ -1,6 +1,6 @@
 import FastClick from 'fastclick'
-import Environment from './environment'
+import Platform from './platform'
 
-if (Environment.runs.on.touch) {
+if (Platform.has.touch) {
   FastClick.attach(document.body)
 }