Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 284d422

Browse files
topherfangiokara
topherfangio
authored and
kara
committed
fix(toolbar): title text should allow ellipsis. (#9229)
Fixes #9026.
1 parent 4985345 commit 284d422

File tree

9 files changed

+350
-12
lines changed

9 files changed

+350
-12
lines changed

‎docs/app/css/style.css

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -844,10 +844,25 @@ table.attributes tr td:last-child {
844844
padding-left: 10px;
845845
}
846846

847-
table.md-api-table tr td:first-child {
847+
table.md-api-table:not(.md-css-table) tr td:first-child {
848848
font-weight: bold;
849849
}
850850

851+
table.md-css-table .md-css-selector {
852+
display: block;
853+
padding: 8px 16px;
854+
855+
/* Offset the padding of the <td> element */
856+
margin: -12px -16px 12px -16px;
857+
858+
background-color: #0C2238;
859+
color: #9ccc65;
860+
}
861+
862+
/* Fix some odd bottom margin */
863+
table.md-css-table td p {
864+
margin: 0.8em 0;
865+
}
851866

852867
.layout_note {
853868
font-size: 0.9em;

‎docs/app/js/css-api-table.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
(function() {
2+
angular.module('docsApp')
3+
.directive('docsCssApiTable', DocsCssApiTableDirective)
4+
.directive('docsCssSelector', DocsCssSelectorDirective);
5+
6+
function DocsCssApiTableDirective() {
7+
return {
8+
restrict: 'E',
9+
transclude: true,
10+
11+
bindToController: true,
12+
controller: function() {},
13+
controllerAs: '$ctrl',
14+
15+
scope: {},
16+
17+
template:
18+
'<table class="md-api-table md-css-table">' +
19+
' <thead>' +
20+
' <tr><th>Available Selectors</th></tr>' +
21+
' </thead>' +
22+
' <tbody ng-transclude>' +
23+
' </tbody>' +
24+
'</table>'
25+
}
26+
}
27+
28+
function DocsCssSelectorDirective() {
29+
return {
30+
restrict: 'E',
31+
transclude: true,
32+
replace: true,
33+
34+
bindToController: true,
35+
controller: function() {},
36+
controllerAs: '$ctrl',
37+
38+
scope: {
39+
code: '@'
40+
},
41+
42+
template:
43+
'<tr>' +
44+
' <td>' +
45+
' <code class="md-css-selector">{{$ctrl.code}}</code>' +
46+
' <span ng-transclude></span>' +
47+
' </td>' +
48+
'</tr>'
49+
}
50+
}
51+
})();

‎src/components/toolbar/demoBasicUsage/index.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@
1010
<md-button class="md-icon-button" aria-label="Settings" ng-disabled="true">
1111
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
1212
</md-button>
13-
<h2>
14-
<span>Toolbar with Disabled/Enabled Icon Buttons</span>
15-
</h2>
16-
<span flex></span>
13+
14+
<h2 flex md-truncate>Toolbar with Disabled/Enabled Icon Buttons</h2>
15+
1716
<md-button class="md-icon-button" aria-label="Favorite">
1817
<md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
1918
</md-button>
19+
2020
<md-button class="md-icon-button" aria-label="More">
2121
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
2222
</md-button>
@@ -30,9 +30,9 @@ <h2>
3030
<md-button aria-label="Go Back">
3131
Go Back
3232
</md-button>
33-
<h2>
34-
<span>Toolbar with Standard Buttons</span>
35-
</h2>
33+
34+
<md-truncate style="position: absolute; left: 90px; right: 170px; top: 13px; bottom: 13px;">Toolbar with Standard Buttons</md-truncate>
35+
3636
<span flex></span>
3737
<md-button class="md-raised" aria-label="Learn More">
3838
Learn More

‎src/components/toolbar/toolbar.js

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,7 @@ angular.module('material.components.toolbar', [
2828
* <md-toolbar>
2929
*
3030
* <div class="md-toolbar-tools">
31-
* <span>My App's Title</span>
32-
*
33-
* <!-- fill up the space between left and right area -->
34-
* <span flex></span>
31+
* <h2 md-truncate flex>My App's Title</h2>
3532
*
3633
* <md-button>
3734
* Right Bar Button
@@ -45,6 +42,30 @@ angular.module('material.components.toolbar', [
4542
* </div>
4643
* </hljs>
4744
*
45+
* <i><b>Note:</b> The code above shows usage with the `md-truncate` component which provides an
46+
* ellipsis if the title is longer than the width of the Toolbar.</i>
47+
*
48+
* ## CSS & Styles
49+
*
50+
* The `<md-toolbar>` provides a few custom CSS classes that you may use to enhance the
51+
* functionality of your toolbar.
52+
*
53+
* <div>
54+
* <docs-css-api-table>
55+
*
56+
* <docs-css-selector code="md-toolbar .md-toolbar-tools">
57+
* The `md-toolbar-tools` class provides quite a bit of automatic styling for your toolbar
58+
* buttons and text. When applied, it will center the buttons and text vertically for you.
59+
* </docs-css-selector>
60+
*
61+
* </docs-css-api-table>
62+
* </div>
63+
*
64+
* ### Private Classes
65+
*
66+
* Currently, the only private class is the `md-toolbar-transitions` class. All other classes are
67+
* considered public.
68+
*
4869
* @param {boolean=} md-scroll-shrink Whether the header should shrink away as
4970
* the user scrolls down, and reveal itself as the user scrolls up.
5071
*
@@ -58,6 +79,7 @@ angular.module('material.components.toolbar', [
5879
* @param {number=} md-shrink-speed-factor How much to change the speed of the toolbar's
5980
* shrinking by. For example, if 0.25 is given then the toolbar will shrink
6081
* at one fourth the rate at which the user scrolls down. Default 0.5.
82+
*
6183
*/
6284

6385
function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) {

‎src/components/truncate/demoBasicUsage/index.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<div>
2+
3+
<div layout-padding>
4+
<p>
5+
The <code>md-truncate</code> component can be used within a wide range of existing Material
6+
components and supports multiple layout scenarios.
7+
</p>
8+
9+
<div>
10+
<md-toolbar class="md-accent">
11+
<div class="md-toolbar-tools">
12+
<md-truncate flex>
13+
Here is an awesome title that will shrink and overflow.
14+
</md-truncate>
15+
16+
<md-button class="md-icon-button md-fab-mini" aria-label="Favorite">
17+
<md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
18+
</md-button>
19+
</div>
20+
</md-toolbar>
21+
</div>
22+
23+
<p>
24+
Note the Toolbar above which uses flex to grow and shrink, or the fake app below which uses
25+
absolute positioning.
26+
</p>
27+
28+
<div id="fake-app">
29+
<div class="sidebar">
30+
<md-icon md-svg-icon="img/icons/menu.svg" aria-label="Menu"></md-icon>
31+
<md-icon md-svg-icon="img/icons/favorite.svg" aria-label="Favorites"></md-icon>
32+
<md-icon md-svg-icon="img/icons/more_vert.svg" aria-label="More Options"></md-icon>
33+
</div>
34+
35+
<div class="app-body">
36+
<h2 md-truncate>My Awesome Application - Page Title</h2>
37+
38+
<p>
39+
Did you know?
40+
</p>
41+
42+
<p>
43+
Bacon ipsum dolor amet ground round landjaeger kielbasa fatback biltong hamburger shankle
44+
shank tenderloin short loin pork. Chicken spare ribs meatball ball tip. Turducken pancetta
45+
shank filet mignon ham boudin. Drumstick kevin pork chop ham meatloaf venison. Doner
46+
turducken pastrami ham. Fatback beef meatball pork chop.
47+
</p>
48+
49+
<p>
50+
Pastrami turducken spare ribs short ribs. Leberkas pork loin ham hock landjaeger.
51+
Porchetta pork chop ham hock turducken beef leberkas. Drumstick pork belly alcatra,
52+
andouille meatball salami chuck hamburger ham hock t-bone ham swine cow cupim jerky.
53+
</p>
54+
55+
<p>
56+
Landjaeger pastrami pork chop hamburger swine jowl beef ribs. Alcatra ball tip short loin
57+
flank picanha ground round tri-tip porchetta biltong fatback frankfurter swine. Shankle
58+
flank short ribs capicola. Frankfurter tongue sausage meatball rump fatback strip steak
59+
tenderloin swine venison. Tongue bacon cupim fatback ham.
60+
</p>
61+
</div>
62+
63+
<div class="rightbar">
64+
<p>
65+
Here is some fantastic information about your application!
66+
</p>
67+
</div>
68+
</div>
69+
</div>
70+
</div>

‎src/components/truncate/demoBasicUsage/style.scss

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
#fake-app {
2+
position: relative;
3+
height: 400px;
4+
width: 400px;
5+
margin-left: auto;
6+
margin-right: auto;
7+
8+
border: 1px solid #333;
9+
10+
.sidebar {
11+
position: absolute;
12+
width: 50px;
13+
left: 0;
14+
top: 0;
15+
bottom: 0;
16+
17+
background-color: #333;
18+
19+
md-icon {
20+
display: block;
21+
color: #ddd;
22+
margin-top: 15px;
23+
}
24+
}
25+
26+
.app-body {
27+
position: absolute;
28+
left: 50px;
29+
right: 100px;
30+
top: 0;
31+
bottom: 0;
32+
33+
background-color: white;
34+
padding: 10px;
35+
overflow: auto;
36+
}
37+
38+
.rightbar {
39+
position: absolute;
40+
width: 100px;
41+
right: 0;
42+
top: 0;
43+
bottom: 0;
44+
45+
background: #ddd;
46+
padding: 10px;
47+
}
48+
}

‎src/components/truncate/truncate.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/**
2+
* @ngdoc module
3+
* @name material.components.truncate
4+
*/
5+
angular.module('material.components.truncate', ['material.core'])
6+
.directive('mdTruncate', MdTruncateDirective);
7+
8+
/**
9+
* @ngdoc directive
10+
* @name mdTruncate
11+
* @module material.components.truncate
12+
* @restrict AE
13+
* @description
14+
*
15+
* The `md-truncate` component displays a label that will automatically clip text which is wider
16+
* than the component. By default, it displays an ellipsis, but you may apply the `md-clip` CSS
17+
* class to override this default and use a standard "clipping" approach.
18+
*
19+
* <i><b>Note:</b> The `md-truncate` component does not automatically adjust it's width. You must
20+
* provide the `flex` attribute, or some other CSS-based width management. See the
21+
* <a ng-href="./demo/truncate">demos</a> for examples.</i>
22+
*
23+
* @usage
24+
*
25+
* ### As an Element
26+
*
27+
* <hljs lang="html">
28+
* <div layout="row">
29+
* <md-button>Back</md-button>
30+
*
31+
* <md-truncate flex>Chapter 1 - The Way of the Old West</md-truncate>
32+
*
33+
* <md-button>Forward</md-button>
34+
* </div>
35+
* </hljs>
36+
*
37+
* ### As an Attribute
38+
*
39+
* <hljs lang="html">
40+
* <h2 md-truncate style="max-width: 100px;">Some Title With a Lot of Text</h2>
41+
* </hljs>
42+
*
43+
* ## CSS & Styles
44+
*
45+
* `<md-truncate>` provides two CSS classes that you may use to control the type of clipping.
46+
*
47+
* <i><b>Note:</b> The `md-truncate` also applies a setting of `width: 0;` when used with the `flex`
48+
* attribute to fix an issue with the flex element not shrinking properly.</i>
49+
*
50+
* <div>
51+
* <docs-css-api-table>
52+
*
53+
* <docs-css-selector code=".md-ellipsis">
54+
* Assigns the "ellipsis" behavior (default) which will cut off mid-word and append an ellipsis
55+
* (&hellip;) to the end of the text.
56+
* </docs-css-selector>
57+
*
58+
* <docs-css-selector code=".md-clip">
59+
* Assigns the "clipping" behavior which will simply chop off the text. This may happen
60+
* mid-word or even mid-character.
61+
* </docs-css-selector>
62+
*
63+
* </docs-css-api-table>
64+
* </div>
65+
*/
66+
function MdTruncateDirective() {
67+
return {
68+
restrict: 'AE',
69+
70+
controller: MdTruncateController,
71+
controllerAs: '$ctrl',
72+
bindToController: true
73+
}
74+
}
75+
76+
/**
77+
* Controller for the <md-truncate> component.
78+
*
79+
* @param $element The md-truncate element.
80+
*
81+
* @constructor
82+
* @ngInject
83+
*/
84+
function MdTruncateController($element) {
85+
$element.addClass('md-truncate');
86+
}

‎src/components/truncate/truncate.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.md-truncate {
2+
overflow: hidden;
3+
white-space: nowrap;
4+
5+
// Default overflow is ellipsis
6+
text-overflow: ellipsis;
7+
8+
// Allow override to use clipping
9+
&.md-clip {
10+
text-overflow: clip;
11+
}
12+
13+
// This is a flex-specific hack that forces the element to only take up available space.
14+
&.flex {
15+
width: 0;
16+
}
17+
}

0 commit comments

Comments
 (0)