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

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

Hide file tree

Showing 9 changed files with 37 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,9 @@ md-tab[disabled] {
 md-tabs-ink-bar {
   background-color: #FFFF8D !important;
 }
+md-tabs .md-paginator {
+  color: white;
+}
+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 */