feat: new framework selection (#297)

xlayers · Apr 8, 2019 · c34df78 · c34df78
1 parent ce8c800
commit c34df78
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 55 deletions.
diff --git a/src/app/editor/code/editor-container/editor-container.component.css b/src/app/editor/code/editor-container/editor-container.component.css
@@ -54,19 +54,28 @@
 :host mat-icon {
   margin: 0 4px;
 }
-.meu-container {
-  position: absolute;
-  right: 15px;
-  z-index: 999;
+.framework_selection,
+.framework_selection ::ng-deep .mat-tab-group{
+  background-color:#ff4f81;
+}
+.framework_selection .flex-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  margin:10px;
 }
-.meu-container button {
+.framework_selection ::ng-deep .mat-tab-labels{
+  justify-content: center;
+}
+.framework_selection ::ng-deep .mat-tab-label{
   color:white;
 }
-a.request-new-library {
-  text-align: center;
-  color: white;
-  display: inline-block;
-  width: 100%;
-  font-size: 13px;
-  padding-top: 10px;
-}
+
+.framework_selection ::ng-deep .mat-tab-label[aria-selected="true"] {
+  background-color: gray;
+}
+
+.framework_selection .mat-tab-group ::ng-deep .mat-tab-body-wrapper {
+  padding-top: 0px;
+}
diff --git a/src/app/editor/code/editor-container/editor-container.component.html b/src/app/editor/code/editor-container/editor-container.component.html
@@ -1,45 +1,55 @@
-<section class="meu-container">
-  <button
-    mat-icon-button
-    [matMenuTriggerFor]="menu"
-    title="Choose framework"
-  >
-    <mat-icon>more_vert</mat-icon>
-  </button>
-  <mat-menu #menu="matMenu">
-    <button mat-menu-item (click)="generateAngular()">
-      <mat-icon svgIcon="angular"></mat-icon>
-      <span>Angular</span>
-    </button>
-    <button mat-menu-item (click)="generateVue()">
-      <mat-icon svgIcon="vue"></mat-icon>
-      <span>Vue</span>
-    </button>
-    <button mat-menu-item (click)="generateReact()">
-      <mat-icon svgIcon="react"></mat-icon>
-      <span>React</span>
-    </button>
-    <button mat-menu-item (click)="generateWc()">
-      <mat-icon svgIcon="wc"></mat-icon>
-      <span>Web Component</span>
-    </button>
-    <button mat-menu-item (click)="generateStencil()">
-      <mat-icon svgIcon="stencil"></mat-icon>
-      <span>Stencil</span>
-    </button>
-    <button mat-menu-item (click)="generateLitElement()">
-      <mat-icon svgIcon="polymer"></mat-icon>
-      <span>LitElement</span>
-    </button>
-    <a
-      class="request-new-library"
-      target="__blank"
-      href="${githubIssueLink}"
-    >
-      <span>Add a new library!</span>
-    </a>
-  </mat-menu>
-</section>
+<section class="framework_selection">
+  <mat-tab-group color="accent" selectedIndex="0"  mat-align-tabs="center"  disableRipple="true" animationDuration="0ms" dynamicHeight="false">
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="flex-container" (click)="generateAngular()">
+          <mat-icon svgIcon="angular"></mat-icon>
+            Angular
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="flex-container" (click)="generateVue()">
+          <mat-icon svgIcon="vue"></mat-icon>
+          Vue
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="flex-container" (click)="generateReact()">
+          <mat-icon svgIcon="react"></mat-icon>
+          React
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="flex-container" (click)="generateWc()">
+          <mat-icon svgIcon="wc"></mat-icon>
+          WebComponents
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="flex-container" (click)="generateStencil()">
+          <mat-icon svgIcon="stencil"></mat-icon>
+          Stencil
+        </div>
+      </ng-template>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <div class="flex-container" (click)="generateLitElement()">
+          <mat-icon svgIcon="polymer"></mat-icon>
+          LitElement
+        </div>
+      </ng-template>
+    </mat-tab>
+  </mat-tab-group>
+  </section>
 
 <mat-tab-group
   selectedIndex="0"