Skip to content

prototype(card): create prototype card based on MDC web #16588

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Aug 22, 2019
Merged

prototype(card): create prototype card based on MDC web #16588

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/dev-app/mdc-card/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ ng_module(
":mdc_card_demo_scss",
],
deps = [
"//src/material-experimental/mdc-button",
"//src/material-experimental/mdc-card",
"@npm//@angular/router",
],
Expand Down
2 changes: 2 additions & 0 deletions src/dev-app/mdc-card/mdc-card-demo-module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@

import {NgModule} from '@angular/core';
import {MatCardModule} from '@angular/material-experimental/mdc-card';
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
import {RouterModule} from '@angular/router';
import {MdcCardDemo} from './mdc-card-demo';

@NgModule({
imports: [
MatCardModule,
MatButtonModule,
RouterModule.forChild([{path: '', component: MdcCardDemo}]),
],
declarations: [MdcCardDemo],
Expand Down
124 changes: 122 additions & 2 deletions src/dev-app/mdc-card/mdc-card-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,122 @@
<!-- TODO: copy in demo template from existing mat-card demo. -->
Not yet implemented.
<div class="demo-card-container">

<!-- TODO(jelbourn): re-add dividers and footers with progress bars once the MDC versions exist -->

<mat-card>
Card with only text content
</mat-card>

<mat-card>
<mat-card-content>
Card with only <code>&lt;mat-card-content&gt;</code> and text content.
</mat-card-content>
</mat-card>

<mat-card>
<mat-card-subtitle>Subtitle</mat-card-subtitle>
<mat-card-title>Card with title and footer</mat-card-title>
<mat-card-content>
<p>This is supporting text.</p>
<p>{{longText}}</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>Like</button>
<button mat-button>Share</button>
</mat-card-actions>
</mat-card>

<mat-card>
<mat-card-subtitle>Subtitle</mat-card-subtitle>
<mat-card-title>Card with title, footer, and inset-divider</mat-card-title>
<mat-card-content>
<p>This is supporting text.</p>
<p>{{longText}}</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>Like</button>
<button mat-button>Share</button>
</mat-card-actions>

</mat-card>

<mat-card>
<img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
<mat-card-title>Content Title</mat-card-title>
<mat-card-content>
<p>Here is some content</p>
</mat-card-content>
<mat-card-actions align="end">
<button mat-button>Like</button>
<button mat-button>Share</button>
</mat-card-actions>
</mat-card>

<mat-card>
<mat-card-header>
<img mat-card-avatar>
<mat-card-title>Header title</mat-card-title>
<mat-card-subtitle>Header subtitle</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
<mat-card-content>
<p>Here is some content</p>
</mat-card-content>
</mat-card>

<mat-card class="demo-card-blue mat-card-flat">
<mat-card-title>Easily customizable</mat-card-title>
<mat-card-actions>
<button mat-button>First</button>
<button mat-button>Second</button>
</mat-card-actions>
</mat-card>

<hr>
<h2>Cards with media area</h2>

<mat-card>
<mat-card-title-group>
<mat-card-title>Card</mat-card-title>
<mat-card-subtitle>Small</mat-card-subtitle>
<img mat-card-sm-image>
</mat-card-title-group>
<mat-card-content>
{{longText}}
</mat-card-content>
</mat-card>

<mat-card>
<mat-card-title-group>
<mat-card-title>Card</mat-card-title>
<mat-card-subtitle>Medium</mat-card-subtitle>
<img mat-card-md-image>
</mat-card-title-group>
<mat-card-content>
{{longText}}
</mat-card-content>
</mat-card>

<mat-card>
<mat-card-title-group>
<mat-card-title>Card</mat-card-title>
<mat-card-subtitle>Large</mat-card-subtitle>
<img mat-card-lg-image>
</mat-card-title-group>
<mat-card-content>
{{longText}}
</mat-card-content>
</mat-card>

<mat-card>
<mat-card-title-group>
<mat-card-title>Card</mat-card-title>
<mat-card-subtitle>Extra large</mat-card-subtitle>
<img mat-card-xl-image>
</mat-card-title-group>
<mat-card-content>
{{longText}}
</mat-card-content>
</mat-card>


</div>
19 changes: 18 additions & 1 deletion src/dev-app/mdc-card/mdc-card-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,18 @@
// TODO: copy in demo styles from existing mat-card demo.
.demo-card-container {
display: flex;
flex-flow: column nowrap;

.mat-mdc-card {
margin: 0 16px 16px 0;
width: 350px;
}

// Use a gray background instead of real images for that "mock" feel.
img {
background-color: gray;
}

.mdc-button {
text-transform: uppercase;
}
}
9 changes: 8 additions & 1 deletion src/dev-app/mdc-card/mdc-card-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,20 @@
* found in the LICENSE file at https://angular.io/license
*/

import {Component} from '@angular/core';
import {Component, ViewEncapsulation} from '@angular/core';

@Component({
moduleId: module.id,
selector: 'mdc-card-demo',
templateUrl: 'mdc-card-demo.html',
styleUrls: ['mdc-card-demo.css'],
encapsulation: ViewEncapsulation.None,
})
export class MdcCardDemo {
longText = `Once upon a midnight dreary, while I pondered, weak and weary,
Over many a quaint and curious volume of forgotten lore—
While I nodded, nearly napping, suddenly there came a tapping,
As of some one gently rapping, rapping at my chamber door.
“’Tis some visitor,” I muttered, “tapping at my chamber door—
Only this and nothing more.”`;
}
9 changes: 9 additions & 0 deletions src/material-experimental/mdc-card/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,21 @@ sass_library(
srcs = glob(["**/_*.scss"]),
deps = [
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
"//src/material/core:core_scss_lib",
],
)

sass_binary(
name = "card_scss",
src = "card.scss",
include_paths = [
"external/npm/node_modules",
],
deps = [
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
],
)

ng_e2e_test_library(
Expand Down
25 changes: 23 additions & 2 deletions src/material-experimental/mdc-card/_mdc-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,34 @@
@import '@material/card/mixins';
@import '@material/typography/mixins';
@import '../mdc-helpers/mdc-helpers';

@mixin mat-card-theme-mdc($theme) {
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);

@include mat-using-mdc-theme($theme) {
// TODO: MDC theme styles here.
@include mdc-card-without-ripple($query: $mat-theme-styles-query);

// Card subtitles are an Angular Material construct (not MDC), so we explicitly set their
// color to secondary text here.
.mat-mdc-card-subtitle {
color: mat-color($foreground, secondary-text);
}
}
}

@mixin mat-card-typography-mdc($config) {
@include mat-using-mdc-typography($config) {
// TODO: MDC typography styles here.
@include mdc-card-without-ripple($query: $mat-typography-styles-query);

// Card subtitles and titles are an Angular Material construct (not MDC), so we explicitly
// set their typographic styles here.
.mat-mdc-card-title {
@include mdc-typography(headline6);
}

.mat-mdc-card-subtitle {
@include mdc-typography(subtitle2);
}
}
}
8 changes: 8 additions & 0 deletions src/material-experimental/mdc-card/card-header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<ng-content select="[mat-card-avatar], [matCardAvatar]"></ng-content>
<div class="mat-mdc-card-header-text">
<ng-content
select="mat-card-title, mat-card-subtitle,
[mat-card-title], [mat-card-subtitle],
[matCardTitle], [matCardSubtitle]"></ng-content>
</div>
<ng-content></ng-content>
12 changes: 12 additions & 0 deletions src/material-experimental/mdc-card/card-title-group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<div>
<ng-content
select="mat-card-title, mat-card-subtitle,
[mat-card-title], [mat-card-subtitle],
[matCardTitle], [matCardSubtitle]"></ng-content>
</div>
<ng-content select="[mat-card-image], [matCardImage],
[mat-card-sm-image], [matCardImageSmall],
[mat-card-md-image], [matCardImageMedium],
[mat-card-lg-image], [matCardImageLarge],
[mat-card-xl-image], [matCardImageXLarge]"></ng-content>
<ng-content></ng-content>
2 changes: 1 addition & 1 deletion src/material-experimental/mdc-card/card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!-- TODO: MDC template here. -->
<ng-content></ng-content>
Loading