Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

toolbar title - multiple colors with same base and different contrast bug on android (md) #11848

Closed
charlouze opened this issue May 29, 2017 · 4 comments

Comments

@charlouze
Copy link

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I want to use multiple title text color in my toolbar. I added my colors in the map with the same base but a different contrast color in order to use the color attribute on my toolbars. The title text color is always the one from the first value defined in the map.

Expected behavior:
It should be the contrast color defined for each color.

Steps to reproduce:

  • create a ionic project
  • add two color in the $colors map with the same base color but a different contrast color
  • create two page with a toolbar using both colors
  • see that it's always the constrast color of the first color defined

Related code:

  • variables.scss
$colors: (
[...]
  greyYellow: (
    base:#49606e,
    contrast:#fbb636
  ),
  greyWhite: (
    base:#49606e,
    contrast:#fff
  ),
[...]
);
  • page1.html
<ion-header>
  <ion-toolbar color="greyYellow">
    <ion-title>Page 1</ion-title>
  </ion-toolbar>
<ion-header>
<ion-content></ion-content>
  • page2.html
<ion-header>
  <ion-toolbar color="greyWhite">
    <ion-title>Page 2</ion-title>
  </ion-toolbar>
<ion-header>
<ion-content></ion-content>

Other information:
I can try to do a PR if needed.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.2.0
    Cordova CLI      : 6.5.0 
    Ionic CLI        : 3.2.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.2.1
    @ionic/cli-plugin-ionic-angular : 1.2.0
    Cordova Platforms               : browser 4.1.0
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.10.3
    OS         : Linux 4.10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
@jgw96 jgw96 added css labels May 30, 2017
@jgw96
Copy link
Contributor

jgw96 commented May 30, 2017

Hello, thanks for opening an issue with us. We are able to reproduce this locally and will look into it.

@brandyscarney
Copy link
Member

Thanks for the issue! I released a nightly with a fix in it:

npm install --save --save-exact ionic-angular@3.3.0-201705301528

@charlouze
Copy link
Author

Thanks for the quick fix !

AmitMY pushed a commit to AmitMY/ionic that referenced this issue Jun 2, 2017
brandyscarney added a commit that referenced this issue Jun 2, 2017
fixes an issue introduced by the fix in #11848

references #11848
brandyscarney pushed a commit that referenced this issue Jun 5, 2017
* fix(lint): unused import

* fix(searchbar): caret moving to the end when typing

* refactor(template): fix component template (#11839)

fix #11838

* chore(issue-template): change link to new org name

* docs(github): rename driftyco references to ionic-team

* fix(toolbar): use the correct contrast color for MD toolbar

fixes #11848

* docs(searchbar): add default values for inputs (#11856)

Complete missing defaults for animated and showCancelButton.

* docs(tabs): rename Angular 2 to Angular (#11837)

* docs(tabs): change double quotes to single quotes (#11836)

* docs(api-tabs): improved typo

* Update tab.ts

* docs(slides): change double quotes to single quotes (#11835)

* docs(api-slides): improve typo

* Update slides.ts

* docs(platform): change double quotes to single quotes (#11834)

* docs(nav-controller): add type to usage example (#11833)

* docs(util): hide normalizeURL (#11735)

* docs(checkbox): rename Angular 2 to Angular (#11831)

* docs(api-checkbox): renamed Angular 2 to Angular

* Update checkbox.ts

* docs(checkbox): improve usage example (#11832)

* docs(api-checkbox): improve typo

* Update chip.ts

* docs(menu): update menu-controller link
Closes #11877. Closes ionic-team/ionic-site#1129

* feat(snapshot): init new "components" for global testing

* feat(snapshot): add app component

* feat(snapshot): add assistive touch

* feat(snapshot): add more components

* feat(snapshot): add more components

* fix(snapshot): add trailing line

* fix(snapshot): remove not working tests

* fix(snapshot): correct name of group
AmitMY pushed a commit to AmitMY/ionic that referenced this issue Jun 6, 2017
AmitMY added a commit to AmitMY/ionic that referenced this issue Jun 6, 2017
* fix(lint): unused import

* fix(searchbar): caret moving to the end when typing

* refactor(template): fix component template (ionic-team#11839)

fix ionic-team#11838

* chore(issue-template): change link to new org name

* docs(github): rename driftyco references to ionic-team

* fix(toolbar): use the correct contrast color for MD toolbar

fixes ionic-team#11848

* docs(searchbar): add default values for inputs (ionic-team#11856)

Complete missing defaults for animated and showCancelButton.

* docs(tabs): rename Angular 2 to Angular (ionic-team#11837)

* docs(tabs): change double quotes to single quotes (ionic-team#11836)

* docs(api-tabs): improved typo

* Update tab.ts

* docs(slides): change double quotes to single quotes (ionic-team#11835)

* docs(api-slides): improve typo

* Update slides.ts

* docs(platform): change double quotes to single quotes (ionic-team#11834)

* docs(nav-controller): add type to usage example (ionic-team#11833)

* docs(util): hide normalizeURL (ionic-team#11735)

* docs(checkbox): rename Angular 2 to Angular (ionic-team#11831)

* docs(api-checkbox): renamed Angular 2 to Angular

* Update checkbox.ts

* docs(checkbox): improve usage example (ionic-team#11832)

* docs(api-checkbox): improve typo

* Update chip.ts

* docs(menu): update menu-controller link
Closes ionic-team#11877. Closes ionic-team/ionic-site#1129

* feat(snapshot): init new "components" for global testing

* feat(snapshot): add app component

* feat(snapshot): add assistive touch

* feat(snapshot): add more components

* feat(snapshot): add more components

* fix(snapshot): add trailing line

* fix(snapshot): remove not working tests

* fix(snapshot): correct name of group
@ionitron-bot
Copy link

ionitron-bot bot commented Sep 2, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 2, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants