jjaybrown / ionic-material-design-lite Goto Github PK

View Code? Open in Web Editor NEW

521.0 521.0 129.0 5.13 MB

Material Design (Lite) style override for Ionic Framework

CSS 76.70% HTML 3.12% JavaScript 20.19%

ionic-material-design-lite's People

Contributors

Stargazers

Watchers

Forkers

giorgiofellipe gitter-badger loiane shizhenzq benediktharter mhartington carlosrojaso rafael-franca muawwaz cyrilsabbagh yogesh2022 mixersoft xstpl won21kr bindzus codecraft-tv reiaguilera mwardi juan-sanzone-olx oxsouls cihejimba faozimipa rithie trongrg caztial jayakumarmanian ahmedjawed01 szwork2013 chris9753 ebulay thiagoterleski oyerok motiurinfo liverbool ribeiro iguissouma wbeater boazjohn rtmilbourne theho bright-sparks mousumidts csvan kanelaoka2 shaode mantisware ferdikt misaunde kshyh fotopretty smartfire seipekm kgnl thomasnelson4 webpest speedpro durvalll intfrr apellegrino6 patwaswapnil vaveee maxamillion32 torst jillchen kzganesan alvaropaco stevenyesz moscarda barathwaja ghmainone webappventures rahmatcmos massimiliano76 ffarzat dalbir sangramchavan yuya-okada kimimhd shaochao13 virtualscreenz jenalgit qsnipp psarmmiey rasmustg ppnohz pengqin ronakkaria t-web sammuelgarcia icarcal dejibimbolaayo mysticmetal aymentalbi amitgg codesharpdev akatsuki-ryu shirone bryant1410 ratanasoth marcelopspereira

ionic-material-design-lite's Issues

status-bar should use 700 tint of header colour

ui-route problem

Hi, the theme looks promising but it somehow cripples the Ionic bundled ui-router.
My <head> (1st September ionic-material-design-lite#0.5.3) on brand new Ionic tab template looks like this

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
    <link href="lib/ionic/release/css/ionic.css" rel="stylesheet">
    <link href="lib/ionic-material-design-lite/dist/css/ionic.material-design-lite.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/release/js/ionic.bundle.js"></script>
    <script src="lib/ionic-material-design-lite/dist/js/ionic.material-design-lite.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>

The application handles just one complete tab change. Then after it changes only the tab (active state of the tab + header line) but the view template remains the same. Once I comment out all the ionic.material-design-lite stuff, everything works as expected. Unfortunately the console is empty, there is no error message, which makes it difficult to trace the bug.

Would anybody be so nice and publish a working (ie. tab) starter as a plunk? The codepen sample provided uses a some mysterious pieces of javascript that makes it (the pen) work but it is difficult to replicate it in a real Ionic app.

Implement Menu with ion-side-menu directive using Material Design animations

Android build fails after adding using Bower

I get a:

Unable to open '/Users/darraghflynn/Desktop/testApp/platforms/android/build/outputs/apk/android-debug-unaligned.apk' as zip archive

error when I execute:

ionic build android

The Android build works fine before adding the library and its dependencies using Bower.

Full stack trace:

:zipalignDebugUnable to open '/Users/darraghflynn/Desktop/testApp/platforms/android/build/outputs/apk/android-debug-unaligned.apk' as zip archive
FAILED

ion-tab .item-active:before not being applied to tab

.item-active:before styles for underline animation are not being applied to tab when created using ionic start cli tabs template.

Ion-view style

I'm trying style my "ion-view" with no success.
For that, i've compile a very simple example to explain better this issue.

P.S. Forgot to mension how can i costumize the header in a ion-view.

Implement Toggle

Getting started documentation

Should we start an ionic project an ionic app from the CLI and than bower install ionic-material-design-lite?

Thanks
Robert Rafferty

Effects not work

Hi, I've installed with bower.
I added the css and js file in head and i've tried to create a button but the ripple effect doesn't work, can you suggest me a correct way to do his work?

This is my code in <ion-nav-bar>:

<ion-nav-buttons side="right">
    // Other code
    <button class="button icon ion-heart button-icon" ng-click="popover.show($event)">
    </button>
</ion-nav-buttons>

Thanks!

ionic run android command fails after install

After running the bower install ionic-material-design-lite, the ionic run android command fails. I have verified this by creating several new projects and only being able to run the command successfully before installation.

$ clear; ionic run android --stacktrace
Running command: ionic/returndb/hooks/after_prepare/010_add_platform_class.js ionic/returndb
Running command: ionic/returndb/platforms/android/cordova/run 
ANDROID_HOME=android_sdk
JAVA_HOME=jdk
WARNING : No target specified, deploying to device '02db59b408e4fad1'.
Running: ionic/returndb/platforms/android/gradlew cdvBuildDebug -b ionic/returndb/platforms/android/build.gradle -PcdvBuildArch=arm -Dorg.gradle.daemon=true
:preBuild
:compileDebugNdk UP-TO-DATE
:preDebugBuild
:checkDebugManifest
:CordovaLib:compileLint
:CordovaLib:copyDebugLint UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles UP-TO-DATE
:CordovaLib:preBuild
:CordovaLib:preDebugBuild
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl UP-TO-DATE
:CordovaLib:compileDebugRenderscript UP-TO-DATE
:CordovaLib:generateDebugBuildConfig UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets UP-TO-DATE
:CordovaLib:generateDebugResValues UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources UP-TO-DATE
:CordovaLib:processDebugManifest UP-TO-DATE
:CordovaLib:processDebugResources UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:compileDebugJava UP-TO-DATE
:CordovaLib:processDebugJavaRes UP-TO-DATE
:CordovaLib:packageDebugJar UP-TO-DATE
:CordovaLib:compileDebugNdk UP-TO-DATE
:CordovaLib:packageDebugJniLibs UP-TO-DATE
:CordovaLib:packageDebugLocalJar UP-TO-DATE
:CordovaLib:packageDebugRenderscript UP-TO-DATE
:CordovaLib:bundleDebug UP-TO-DATE
:prepareAndroidCordovaLibUnspecifiedDebugLibrary UP-TO-DATE
:prepareDebugDependencies
:compileDebugAidl UP-TO-DATE
:compileDebugRenderscript UP-TO-DATE
:generateDebugBuildConfig UP-TO-DATE
:generateDebugAssets UP-TO-DATE
:mergeDebugAssets UP-TO-DATE
:generateDebugResValues UP-TO-DATE
:generateDebugResources UP-TO-DATE
:mergeDebugResources UP-TO-DATE
:processDebugManifest UP-TO-DATE
:processDebugResources UP-TO-DATE
:generateDebugSources UP-TO-DATE
:compileDebugJava UP-TO-DATE
:preDexDebug UP-TO-DATE
:dexDebug UP-TO-DATE
:processDebugJavaRes UP-TO-DATE
:validateDebugSigning
:packageDebug UP-TO-DATE
:zipalignDebugUnable to open 'ionic/returndb/platforms/android/build/outputs/apk/android-debug-unaligned.apk' as zip archive
 FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':zipalignDebug'.
> Process 'command 'android_sdk/build-tools/23.0.0/zipalign'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 24.307 secs

ionic/returndb/platforms/android/cordova/node_modules/q/q.js:126
                    throw e;
                          ^
Error code 1 for command: ionic/returndb/platforms/android/gradlew with args: cdvBuildDebug,-b,ionic/returndb/platforms/android/build.gradle,-PcdvBuildArch=arm,-Dorg.gradle.daemon=true
ERROR running one or more of the platforms: Error: ionic/returndb/platforms/android/cordova/run: Command failed with exit code 1
You may not have the required environment or OS to run this project

My system info

Cordova CLI: 5.2.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
OS: Distributor ID:     Ubuntu Description:     Ubuntu 15.04 
Node Version: v0.12.7

Typo in @extend

i think that there is a typo in scss/list/_card.scss

@extend .list-insert;

should be

@extend .list-inset;

Implement modals

Implement Select boxes

Use gulp-load-plugins to decrease LOC in gulpfile.js

content view for tabs isn't positioned correctly with icon + text

Content view top position is too high, needs to be lowered for icon + text

bower ENOTFOUND Package ionic-material-design-lite not found

C:\Users\carlos\Desktop\trabajo_ionic\ionic-material-design>bower install ionic-ma
terial-design-lite
bower cached git://github.com/driftyco/ionic-bower.git#1.0.1
bower validate 1.0.1 against git://github.com/driftyco/ionic-bower.git#1.0.
1
bower ENOTFOUND Package ionic-material-design-lite not found

Implement range element

Maintain Ionic directive functionality, but implement the superficial Material Design guidelines

Implement Form elements

Ensure all form elements implement Material Design guidelines, maintain Ionic utilities for layout to maintain iOS support

Implement Sub-headers

Using Material Design guidelines implement Ionic styles for sub-headers including updates to the meta classes has-subheader, nav-bar-has-subheader and has-header.has-subheader.has-tabs-top

Implement Radio buttons

Replace ":active" to ".activated"

When use ":active", some effects disappear in Chrome Desktop, like a "box-shadow".

Implement Ionic Cards

Support Header buttons with text and Icons

Licence ?

There is none information about any licence. Your code is available under which licence ?

item-avatar is broken

Code:

<ion-view view-title="Home">
  <ion-nav-title>
    <sos-header></sos-header>
  </ion-nav-title>

  <div class="bar bar-subheader">
    <h1 class="title">Agenda rápido</h1>
  </div>

  <ion-content class="padding has-subheader">
    <ion-list>
      <div ng-repeat="group in vm.groups">
        <div class="item item-divider">
          {{group.name}}
        </div>

        <div ng-if="group.loading" class="item">
          <ion-spinner></ion-spinner>
        </div>
        <div ng-if="group.error" class="item">
          {{group.error}}
        </div>

        <div ng-repeat="item in group.items" ng-if="!group.loading && !group.error">

          <a class="item item-avatar item-button-right" ui-sref="app.professional({id: item.id})">
            <img ng-src="{{item.avatar}}">
            <h2>{{item.name}}</h2>
            <p>{{item.services}}</p>

            <button class="button icon ion-calendar" ng-click="vm.openLightningSchedule()"></button>
          </a>

        </div>
      </div>
    </ion-list>
  </ion-content>
</ion-view>

Although there are ng-if there, I removed all dynamic data and added static html and still the list was rendered very wrong.

Why we need .platform-android & .platform-override class on css

Why we need to have .platform-android & .platform-override class? I thought the primary reason we use ionic to make our life easier by make the design once and can work on all devices but those classes made me to spend more time debugging what makes differences between desktop & android.

Desktop:

Android:

input[text]: label does not float on iOS

See attached screenshot, the relevant element is this:

<label class="item item-input">
   <span class="input-label">Username</span>
   <input type="text" name="username" ng-model="authorization.username" required>
</label>

EDIT: This also affects the blue underline effect on the input element, and other animations.

Inclusion breaks standard iOS styling

Currently, merely including this project (i.e. without enabling the platform override) causes iOS styling to break completely.

Code for the above is below, everything is a standard Ionic Tabs starter project with ionic-mdl included.

<ion-view view-title="Login">

  <ion-content class="padding">

    <form name="authorizationForm" novalidate="" ng-submit="signIn()">

      <div class="list">

        <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text" name="username" ng-model="authorization.username" required>
        </label>

        <div class="error-container" ng-show="authorizationForm.username.$error"
             ng-messages="authorizationForm.username.$error">
          <div class="error" ng-message="required">
            <i class="ion-information-circled"></i>
            This field is required!
          </div>
        </div>

        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" name="password" ng-model="authorization.password" required>
        </label>

        <div class="error-container last-error-container"
             ng-show="authorizationForm.password.$error && authorizationForm.$submitted"
             ng-messages="authorizationForm.password.$error">
          <div ng-messages-include="error-list.html"></div>
        </div>

      </div>

      <button class="button button-full button-positive" type="submit">
        Sign In
      </button>

    </form>

  </ion-content>

</ion-view>

fix button-clear class for bar-header

button-clear class used for buttons within a bar-header don't carry forward button styles for Material bar-header

Menu button is not vertically centered

It seems the issue is display: inherit; from:

.bar .buttons-left span {
    margin-right: 5px;
    display: inherit;

If I remove display: inherit;, then the following rule will be applied:

.bar .buttons span {
    display: inline-block;

Which will fix the issue. But I'm not sure if it will break something else.

Implement Checkbox

Uncaught TypeError

Uncaught TypeError: Cannot read property 'style' of null and
Uncaught TypeError: Cannot read property 'classList' of null

The error happens when I click on one of the tabs.

And the list is cut. Any suggestion?

http://i.imgur.com/ncsGcew.png

My index.html

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="css/ionic.material-design-lite.css" rel="stylesheet">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>




<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<script src="js/ionic.material-design-lite.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

Implement Material Design navigation

Implement Content styles and typography

Typography and content padding should be inline with Material Design guidelines

npm support?

Any support for npm? Particularly to be used for webpack?

Receive "Cannot read property 'classList' of null" error on tabs

Triggered by the ripple component within MDL, likely cause will be ripple component looking for span classes not created within the ionic tab structure.

Ripple effect displays correctly however.

Error compiling sass

$ gulp sass
[22:47:01] Starting 'sass'...
{ [Error: bower_components/material-design-lite/src/_variables.scss
  311:20  ]
  message: 'bower_components/material-design-lite/src/_variables.scss\n  311:20  ',
  column: 20,
  line: 311,
  file: 'bower_components/material-design-lite/src/_variables.scss',
  status: 1,
  messageFormatted: '\u001b[4mbower_components/material-design-lite/src/_variables.scss\u001b[24m\n\u001b[90m  311:20\u001b[39m  ',
  name: 'Error',
  stack: 'Error: bower_components/material-design-lite/src/_variables.scss\n  311:20  \n    at options.error (/Users/Denis/git/ionic-material-design-lite/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:276:32)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-sass' }

It looks like an error in material-design-lite, it is not even clear what's going on. This is the raw output from sass.

however, i've run sass bower_components/material-design-lite/src/material-design-lite.scss and it works.

Issue with google fonts

Hi,
I am trying to include google fonts in the material design . Unable to apply font to the text . Please suggest me.

Support Material Design Icons using Ionic icon classes

Roboto Fonts

Including the Roboto Font files isn't really necessary. The chromeview on android gives you access to the system font, similar to how iOS has -apple-system-font

Instead of included the various font files, you could simplify and use this instead

  * {
    font-family: sans-serif;
  }

Then just use the various weights (100,200,300,500) where you need it.

Reference:
https://gist.github.com/dpogue/cf8561b0cfb9d40be95d#chrome-on-android

ReferenceError: componentHandler is not defined

I having problem with ionic material design lite when running on Nexus 5, here is my error message.

Any idea how to solve this?

ReferenceError: componentHandler is not defined
    at file:///android_asset/www/lib/ionic-material-design-lite/dist/ionic.material-design-lite.min.js:1:555
    at file:///android_asset/www/lib/ionic/release/js/ionic.bundle.js:48811:19
    at Object.ionic.Platform.ready (file:///android_asset/www/lib/ionic/release/js/ionic.bundle.js:2122:9)
    at Object.self.ready (file:///android_asset/www/lib/ionic/release/js/ionic.bundle.js:48809:26)
    at o.hasOwnProperty.t.useMaterialRipple.o.hasOwnProperty.post (file:///android_asset/www/lib/ionic-material-design-lite/dist/ionic.material-design-lite.min.js:1:538)
    at invokeLinkFn (file:///android_asset/www/lib/ionic/release/js/ionic.bundle.js:17477:9)
    at nodeLinkFn (file:///android_asset/www/lib/ionic/release/js/ionic.bundle.js:16977:11)
    at compositeLinkFn (file:///android_asset/www/lib/ionic/release/js/ionic.bundle.js:16368:13)
    at nodeLinkFn (file:///android_asset/www/lib/ionic/release/js/ionic.bundle.js:16972:24)
    at compositeLinkFn (file:///android_asset/www/lib/ionic/release/js/ionic.bundle.js:16368:13) <button ng-click="validate()" class="button button-clear button-icon ion-checkmark mdl-js-button mdl-js-ripple-effect">

Implement Tabs

Using Material Design guidelines implement tab style and bar animations.

Maintain Ionic tab directive logic, structure and positioning styles.

Platform Override Not Working

If you notice the header bar, platform overrides aren't working within the iOS simulator. It seems to work just fine on Safari when testing (and the Ionic Lab as well).

I have $ionicMaterialConfigProvider.enableForAllPlatforms(); in my .config function.

Handle gulp-sass compilation errors

log them to the console

Question: Installation process not clear

Hi,

I've been trying to integrate ionic-material-design-lite in my current ionic project, but have not, so far, been 100% successful.
I ran bower install ionic-material-design-lite and pasted the following lines below the ionic imports (when I pasted them above I got errors about angular not being defined, so I assume this is the correct way):

<link href="/lib/ionic-material-design-lite/dist/css/ionic.material-design-lite.min.css" rel="stylesheet">
<script src="lib/ionic-material-design-lite/dist/js/ionic.material-design-lite.bundle.min.js"></script>

This transformed the layout on android immediately, but not on iOS (as expected) so I added the line:

  $ionicMaterialConfigProvider.enableForAllPlatforms();

to my .config() , but without luck and all my attempts to include ionicMaterialConfigProvider as a module resulted in the following error:

0 871882 error Uncaught Error: [$injector:modulerr] Failed to instantiate module localpower due to:
Error: [$injector:modulerr] Failed to instantiate module $ionicMaterialConfigProvider due to:
Error: [$injector:nomod] Module '$ionicMaterialConfigProvider' is not......2), http://192.168.1.187:8101/lib/ionic/js/ionic.bundle.js, Line: 13212

So my question is, what else do I have to do to completely install the framework?
Thanks.

Some guidance of what will be included with RC1 and beyond

Hi,

as a lot of developers would love to integrate Google Material Design with Ionic and the ionicmaterial.com project does not seem to be the way to go (not connected to original implementation of Google; seems to be dead - no commit's since months) i am currently reviewing your variant.

Can you please give me (and others) some guidance of what you aim to achieve with RC1 and beyond?

Esp.:

RC1: Will it include all components of google material design light (cp. http://www.getmdl.io/components/index.html) or a subset - if it will be a subset, do you have an estimate which components will be included?
Beyond: Do you aim to include some of the components of Angular Material (esp. FAB Speed Dial, Bottom Sheet, Toast) some time later or will you stick with what is provided by mdl upstream? // and yes i know, that you cannot directly use components of Angular Material as this would conflict with Ionic - the question is if you aim to port some of the interesting ones for ionic.

Regards and thx for the clarification

   <ion-content>
        <ion-list>
            <ion-item ng-repeat="item in vm.itens">
                <h4>{{item.title}}</h4>
                <p>{{item.one}}</p>
            </ion-item>
        </ion-list>
    </ion-content>