Use tabs in demo.

DuneSt · Jun 10, 2019 · 611b672 · 611b672
1 parent 469cdc7
commit 611b672
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 9 deletions.
diff --git a/src/Material-Components-Demo/MDCDemoLibrary.class.st b/src/Material-Components-Demo/MDCDemoLibrary.class.st
@@ -239,7 +239,6 @@ MDCDemoLibrary >> mcDemoCss [
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
-    background: #fafafa;
     color: #757575;
 }
 
@@ -332,12 +331,21 @@ MDCDemoLibrary >> mcDemoCss [
     -webkit-flex-grow: 1;
     flex-grow: 1;
     overflow: hidden;
+    background: #ECEFF1;
 }
 
 .mdc-components .mdc-components__page {
     min-height: 1000px;
 }
 
+.mdc-components .mdc-components__page .mdc-demo-panel {
+    padding-top: 50px;
+}
+
+.mdc-components .mdc-components__page > .mdc-tab-bar {
+    background-color: white;
+}
+
 .mdc-components__page-index{
     box-sizing: border-box;
     position: relative;
@@ -465,6 +473,7 @@ MDCDemoLibrary >> mcDemoCss [
     border: 1px solid #eee;
     border-collapse: collapse;
     border-spacing: 0;
+    background-color: white;
 }
 
 .mdc-documentation th, .mdc-documentation td {
@@ -490,7 +499,7 @@ MDCDemoLibrary >> mcDemoCss [
 }
 
 .mdc-documentation tr:nth-child(2n) {
-    background-color: #ECEFF1;
+    background-color: #F5F5F5;
 }
 
 .mdc-documentation th:first-child, .mdc-documentation td:first-child {
@@ -548,6 +557,7 @@ MDCDemoLibrary >> mcDemoCss [
 	display: flex;
 	justify-content: space-around;
 	align-items: center;
+    background-color: white;
 }
 
 /* Tabs */
@@ -556,6 +566,10 @@ MDCDemoLibrary >> mcDemoCss [
     min-height: 350px;
 }
 
+.mdc-demo-tabbar .mdc-snippet-demo-container > div {
+    background-color: white;
+}
+
 
 
 

diff --git a/src/Material-Components-Demo/MDCDemoScreen.class.st b/src/Material-Components-Demo/MDCDemoScreen.class.st
@@ -121,8 +121,9 @@ MDCDemoScreen >> renderConstructorsOf: class on: html [
 	(Pragma allNamed: #mdcConstructor:description: in: class)
 		ifNotEmpty: [ :pragmas | 
 			html paragraph: 'Constructors to send to Seaside''s canvas: '.
-			html
-				table: [ html
+			html table
+				mdcElevation: 2;
+				with: [ html
 						tableHead: [ html
 								tableRow: [ html
 										tableHeading: 'Selector';
@@ -143,8 +144,27 @@ MDCDemoScreen >> renderContentOn: html [
 		with: [ html div
 				mdcClass: 'component-title';
 				with: [ self renderTitleComponentContent: html ].
-			self renderScreenContentOn: html.
-			self renderDocumentationOn: html ]
+			html
+				mdcTabBar: [ html
+						mdcTabSimpleScroller: [ #('Demo' 'API')
+								do: [ :page | 
+									html
+										mdcSimpleTabActive: page = 'Demo'
+										customization: [ :tab | 
+											tab
+												onClick:
+													('Array.from( document.getElementsByClassName("mdc-demo-panel")).forEach((element) => { element.style.display = "none" }); document.getElementById("' , page asLowercase , '").style.display = "block";')
+														js ]
+										with: [ html mdcTabLabel: page ] ] ] ].
+			html div
+				id: 'demo';
+				mdcClass: 'demo-panel';
+				with: [ self renderScreenContentOn: html ].
+			html div
+				style: 'display: none;';
+				id: 'api';
+				mdcClass: 'demo-panel';
+				with: [ self renderDocumentationOn: html ] ]
 ]
 
 { #category : #rendering }
@@ -165,11 +185,12 @@ MDCDemoScreen >> renderDocumentationOn: html [
 
 { #category : #rendering }
 MDCDemoScreen >> renderOptionsOf: class on: html [
-	^ (Pragma allNamed: #mdcApi:priority: from: class to: WATagBrush)
+	(Pragma allNamed: #mdcApi:priority: from: class to: WATagBrush)
 		ifNotEmpty: [ :pragmas | 
 			html paragraph: 'Options: '.
-			html
-				table: [ html
+			html table
+				mdcElevation: 2;
+				with: [ html
 						tableHead: [ html
 								tableRow: [ html
 										tableHeading: 'Selector';