chore(mdTabs): use md-icon for pagination arrows

Closes #1464
angular · Feb 11, 2015 · 8293998 · 8293998
1 parent a9c16e0
commit 8293998
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 13 deletions.
diff --git a/docs/app/img/icons/tabs-arrow.svg b/docs/app/img/icons/tabs-arrow.svg
diff --git a/docs/app/partials/docs-demo.tmpl.html b/docs/app/partials/docs-demo.tmpl.html
@@ -16,7 +16,7 @@
  style="min-width: 72px;"
  layout="row" layout-align="center center"
  ng-click="demoCtrl.$showSource = !demoCtrl.$showSource">
- <md-icon svg-src="img/icons/ic_visibility_24px.svg"
+ <md-icon md-svg-src="img/icons/ic_visibility_24px.svg"
  style="margin: 0 4px 0 0;">
  </md-icon>
  Source

diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
@@ -61,7 +61,7 @@ <h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ secti
 
  <div class="md-toolbar-tools" ng-click="openMenu()">
  <button class="menu-icon" hide-gt-sm aria-label="Toggle Menu">
- <md-icon svg-src="img/icons/ic_menu_24px.svg"></md-icon>
+ <md-icon md-svg-src="img/icons/ic_menu_24px.svg"></md-icon>
  </button>
 
  <div layout="row" flex class="fill-height">
@@ -88,7 +88,7 @@ <h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ secti
  <md-button ng-class="{hide: !currentDoc || !currentDoc.hasDemo}"
  ng-href="#/demo/{{currentComponent.name}}"
  style="position: relative; padding-left: 30px; margin-right: 15px;">
- <md-icon svg-src="img/icons/ic_play_arrow_24px.svg" style="
+ <md-icon md-svg-src="img/icons/ic_play_arrow_24px.svg" style="
  height: 36px;
  position: absolute;
  left: 0px;
@@ -101,7 +101,7 @@ <h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ secti
  ng-href="{{currentDoc.githubUrl}}"
  hide-sm hide-md
  style="position: relative; padding-left: 30px; margin-right: 15px;">
- <md-icon svg-src="img/icons/ic_launch_24px.svg" style="
+ <md-icon md-svg-src="img/icons/ic_launch_24px.svg" style="
  height: 36px;
  position: absolute;
  left: 0px;

diff --git a/src/components/tabs/demoDynamicTabs/style.css b/src/components/tabs/demoDynamicTabs/style.css
@@ -16,6 +16,11 @@ md-tabs, md-tabs .md-header {
 md-tab[disabled] {
  opacity: 0.5;
 }
+
+md-tabs .md-next md-icon {
+ transform: rotate(180deg);
+}
+
 .md-tab-content {
  background: white;
 }

diff --git a/src/components/tabs/demoStaticTabs/style.css b/src/components/tabs/demoStaticTabs/style.css
@@ -83,3 +83,6 @@ md-tab[disabled] {
 md-tabs-ink-bar {
  background-color: #FFFF8D !important;
 }
+md-tabs .md-next md-icon {
+ transform: rotate(180deg);
+}
diff --git a/src/components/tabs/js/tabsDirective.js b/src/components/tabs/js/tabsDirective.js
@@ -110,6 +110,7 @@ function TabsDirective($mdTheming) {
  'ng-if="pagination.active && pagination.hasPrev" ' +
  'ng-click="pagination.clickPrevious()" ' +
  'aria-hidden="true">' +
+ '<md-icon md-svg-icon="img/icons/tabs-arrow.svg"></md-icon>' +
  '</button>' +
 
  // overflow: hidden container when paginating
@@ -124,6 +125,7 @@ function TabsDirective($mdTheming) {
  'ng-if="pagination.active && pagination.hasNext" ' +
  'ng-click="pagination.clickNext()" ' +
  'aria-hidden="true">' +
+ '<md-icon md-svg-icon="img/icons/tabs-arrow.svg"></md-icon>' +
  '</button>' +
 
  '</section>' +

diff --git a/src/components/tabs/tabs-arrow.svg b/src/components/tabs/tabs-arrow.svg
diff --git a/src/components/tabs/tabs-theme.scss b/src/components/tabs/tabs-theme.scss
@@ -2,6 +2,9 @@ md-tabs.md-THEME_NAME-theme {
  .md-header {
  background-color: transparent;
  }
+ .md-paginator {
+ color: '{{primary-color}}';
+ }
 
  &.md-accent {
  .md-header {

diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
@@ -38,15 +38,6 @@ md-tabs {
  &.md-next {
  right: 0;
  }
-
- /* TODO Once we have a better way to inline svg images, change this
- to use svgs correctly */
- &.md-prev {
- background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMjA4IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyIAkJIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4gPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+IDwvZz4gPC9nPiA8ZyBpZD0iR3JpZCIgZGlzcGxheT0ibm9uZSI+IDxnIGRpc3BsYXk9ImlubGluZSI+IDwvZz4gPC9nPiA8L3N2Zz4NCg==');
- }
- &.md-next {
- background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMzM2IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTAsNiA4LjYsNy40IDEzLjIsMTIgOC42LDE2LjYgMTAsMTggMTYsMTIgCQkiIHN0eWxlPSJmaWxsOndoaXRlOyIvPiA8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4gPC9nPiA8L2c+IDxnIGlkPSJHcmlkIiBkaXNwbGF5PSJub25lIj4gPGcgZGlzcGxheT0iaW5saW5lIj4gPC9nPiA8L2c+IDwvc3ZnPg0K');
- }
 }
 
 /* If `center` justified, change to left-justify if paginating */