Угловой компонент материала с различными стилями - PullRequest
Новая
       0

Угловой компонент материала с различными стилями

0 голосов
/ 03 марта 2019

Я бы использовал угловой шагер в двух разных компонентах с разными стилями.Один Stepper находится в диалоге, а другой в обычном компоненте.Когда я сначала открываю диалог, стиль в порядке.Но когда я открываю «нормальный» компонент и перехожу в диалог, он переопределяет мои стили из «обычного» компонента.

ДИАЛОГ

import { Component, OnInit, Inject } from '@angular/core';
import { ApiService } from './api.service';
import * as socketIO from 'socket.io-client';
import * as $ from 'jquery';
import { FormBuilder, FormGroup } from '@angular/forms';


import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';


export interface DialogData {
  locations: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'pilot';

  constructor(private ApiService:ApiService, public dialog: MatDialog) { }

  ngOnInit() {

    //.......
    // $("#widget").colorwheel();
    
  }
  
      openDialog(): void {
       const dialogRef = this.dialog.open(NewModuleDialogComponent, {
          width: '650px',
          data: {locations: this.ApiService.locations},
        });
     }
}





@Component({
  selector: 'app-new-module-dialog',
  templateUrl: './new-module-dialog/new-module-dialog.component.html',
  styleUrls: ['./new-module-dialog/new-module-dialog.component.css']
})
export class NewModuleDialogComponent implements OnInit {


  constructor(
     public dialogRef: MatDialogRef<NewModuleDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: DialogData){ }

  ngOnInit() {
  }

}
/deep/ .mat-dialog-container{
	padding: 0;
	background-color: #AFAFAF;
	border: 2px solid orange;
}

/deep/ .mat-stepper-vertical{
	background-color: #373B3E5F  !important;
	color: white !important;
}	


/deep/ .mat-step-header .mat-step-label.mat-step-label-active{
	color: white !important;
}

/deep/ .mat-step-header .mat-step-icon{
	background-color: white;
	padding: 5px;
}

/deep/ .mat-step-icon-selected{
	background-color: #ACDD33 !important;
}

/deep/ .mat-stepper-vertical-line::before{
	border-left-color: #ACDD33 !important;
	margin-left: 4px;
}

.matOption:hover{
	background-color:  #ACDD33a0;
}

/deep/.mat-form-field-appearance-legacy .mat-form-field-label{
	color: white !important;
}

/deep/.mat-form-field-label-wrapper{
	border-bottom: 1px solid #98999D !important;
}

/deep/.mat-input-element{
	caret-color: white !important; /*//kurser*/
	color: white  !important;
}


/deep/.mat-select-value{
	/*position: relative;
	left: -250px;*/
	color: white !important;
}

/deep/.mat-select-arrow{
	position: relative;
	left: -250px;
	color: #ACDD33 !important;
}

/deep/.mat-vertical-content{
	padding-bottom: 0px !important;
}
<h2 mat-dialog-title>Neues Modul erkannt</h2>
<!-- <div mat-dialog-content>
  <p>Raum</p>
</div>
<div mat-dialog-content>
  <p>Bezeichnung</p>
</div> -->
<div class="NMD">
<mat-vertical-stepper [linear]="isLinear" #stepper2>
  <mat-step>
    <form>
      <ng-template matStepLabel>Raum zuordnem</ng-template>
       <mat-select class="selectPanel" placeholder="Raum">
	       <div *ngFor="let location of data.locations" >
			    <mat-option  class="matOption" [value]="location.location">
			        {{location.location}}
			    </mat-option>
			</div>
		</mat-select>
	</form>
  </mat-step>
  
  <mat-step>
    <form>
      <ng-template matStepLabel>Benennen</ng-template>
      <mat-form-field>
        <input matInput placeholder="Name" required>
      </mat-form-field>
    </form>
  </mat-step>
   <mat-step>
     <form>
      <ng-template matStepLabel>Modul hinzufügen</ng-template>
        <!-- <div mat-dialog-actions>
          <button mat-button [mat-dialog-close]="true">Abbrechen</button>
          <button mat-button cdkFocusInitial>Speichern</button>
        </div> -->
      </form>
   </mat-step>
  
</mat-vertical-stepper>
</div>

И «НОРМАЛЬНЫЙ» КОМПОНЕНТ 

#scenes{
	display: flex;
	flex-direction: column;	
	padding: 0;
	margin: 0;
	margin-left: 210px;
	//height: 100%;
	overflow: hidden;
}

.mat-form-field{
	display: block;
	width: 200px;
	font-weight: 300;
	padding-top: 3px;
//	color: white;

}

/deep/.mat-expansion-panel-content{
	font: normal;
}

/deep/.mat-form-field-appearance-legacy .mat-form-field-label{
	color: #98999D !important;
}

/deep/.mat-form-field-label-wrapper{
	border-bottom: 1px solid #98999D !important;
}

/deep/.mat-input-element{
	caret-color: #98999D !important; /*//kurser*/
	color: #98999D  !important;
}

/deep/.mat-expansion-panel-header-title{
	color: #98999D !important;
}

/deep/ .mat-expansion-panel-header-description{
	color: #98999D !important;
	font-weight: 200;
}


/deep/ .mat-expansion-panel{
	margin: 20px 60px !important; 
	background-color: #444247;
	color: #98999D !important;
}

/deep/ .mat-expansion-panel-header{
	padding-left: 0px !important;
	padding-top: 0px !important;
	background-color: none  !important;
	padding-bottom: 0px !important;
}

/deep/ .mat-expansion-panel-header .mat-expanded{
	background-color: none !important;
}

/deep/.mat-expansion-panel-header.komfortScene{
	background-color:  #0070c040  !important;
}

/deep/.mat-expansion-panel-header.timerScene{
	background-color:  #8e0fbc40  !important;
}
/deep/.mat-expansion-panel-header.alarmScene{
	background-color:  #ff000040  !important;
}

.szenenContainer{
	display: flex;
	padding-top: 10px;
}

.activityClass{
	//padding-top: 16px;
	padding-left: 40px;
}

.activityClass span{
	color:  #373B3E;
	font-weight: 300;
}

/deep/ .mat-expansion-panel-body{
	padding: 0 !important;
}

/deep/ .mat-stepper-vertical{
	background-color: #373B3E5F  !important;
	color: white !important;
}

/deep/ .mat-step-header .mat-step-label.mat-step-label-active{
	color: #98999D !important;
}

/deep/ .mat-step-header .mat-step-icon{
	background-color: white;
	padding: 5px;
}

/deep/ .mat-step-icon-selected{
	background-color: #ACDD33 !important;
}

/deep/ .mat-stepper-vertical-line::before{
	border-left-color: #ACDD33 !important;
	margin-left: 4px;
}

/deep/ .mat-button-toggle-checked{
	background-color: #ACDD33 !important;
}

.toggleTabGroup{
	margin-top: 20px;
}

.toggleTab span{
	display: block;
	line-height: 12px;
	width: 50px;
	color: #98999D;
	font-weight: 200;
}

.preconfigOption1{
	background-color:  #98999D1F;
}

.preconfigOption1:hover{
	background-color:   #ACDD33a0;
}

.matOption:hover{
	background-color:   #ACDD33a0;
}


.selectPanel{
	padding-left: 250px;
//	padding-top: -50px;
}

/deep/.mat-select-value{
	position: relative;
	left: -250px;
	color: #98999D;
}

/deep/.mat-select-arrow{
	position: relative;
	left: -250px;
	color: #ACDD33 !important;
}

/deep/.mat-vertical-content{
	padding-bottom: 0px !important;
}

.matPanelSceneSymbol{
	display: flex;
	justify-content: center;
	border-right: 1px solid  #98999D;
	float: left;
	height: 50px;
	width: 60px;
	padding: 0;
	background-color: #373B3E;
}

.matPanelSceneSymbol i{
	margin-top: 8px;
}

.matPanelSceneText{
	padding: 15px 20px;
}
<div id="scenes">
	<h2>Szenen</h2>

	<mat-expansion-panel>
	  <mat-expansion-panel-header [expandedHeight]="'50px'"  [collapsedHeight]="'50px'" class="komfortScene" >

	    <mat-panel-title>
	    	<div class="matPanelSceneSymbol"><i class="material-icons md-36 md-light active">weekend</i></div>
	    	
	     	<div class="matPanelSceneText"> Testszene</div>
	    </mat-panel-title>
	    <mat-panel-description>
	      <div class="matPanelSceneText">Szenenbeschreibung</div>
	    </mat-panel-description>

	  </mat-expansion-panel-header>
	 <!--  <div class="szenenContainer"> -->
	  	<!-- <button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button> -->
<mat-vertical-stepper [linear]="isLinear" #stepper>
	<mat-step>
    <form>
      <ng-template matStepLabel>Funktion wählen</ng-template>
      <mat-button-toggle-group #group="matButtonToggleGroup" class="toggleTabGroup">
		  <mat-button-toggle value="left" class="toggleTab">
		   <i class="material-icons md-36 md-light active">weekend</i>
		   <span>Komfort</span>
		  </mat-button-toggle>
		  <mat-button-toggle value="center" class="toggleTab">
		   <i class="material-icons md-36 md-red">verified_user</i>
		   <span>Alarm</span>
		  </mat-button-toggle>
		  <mat-button-toggle value="right" class="toggleTab">
		   <i class="material-icons md-36 md-violet">access_time</i>
		   <span>Timer</span>
		  </mat-button-toggle>
		</mat-button-toggle-group>
    </form>
  </mat-step>
  <mat-step>
    <form>
      <ng-template matStepLabel>Szene benennen & beschreiben</ng-template>
      <mat-form-field>
        <input matInput placeholder="Name" required>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Beschreibung" required>
      </mat-form-field>
  <!--     <div>
        <button mat-button matStepperNext></button>
      </div> -->
    </form>
  </mat-step>
  
  <mat-step>
    <form>
      <ng-template matStepLabel>Auslöser</ng-template>
      <mat-form-field>
			  <mat-select class="selectPanel" placeholder="Auslöser">
			  <!--   <mat-option>-- None --</mat-option> -->
			   <!--  <mat-optgroup *ngFor="let modules of ApiService.modulesForDevices" [label]="modules.modulename" -->
			   	<mat-optgroup label="Vorkonfigurierte Auslöser" >
			   		<mat-option class="preconfigOption1" value="test">
				        Alle Fensterkontakte
				      </mat-option>
				      <mat-option class="preconfigOption1"value="test">
				        Alle Bewegungsmelder
				      </mat-option>
				      <mat-option class="preconfigOption1"value="test">
				        Alle Rauchmelder
				      </mat-option>
				      <mat-option class="preconfigOption1"value="test">
				        Alle Wassermelder
				      </mat-option>
			   	</mat-optgroup>

			      <div *ngFor="let modules of ApiService.modulesForDevices" >
				      <mat-option  class="matOption" *ngIf="modules.type === 2" [value]="modules.id">
				        {{modules.location}} - {{modules.description}}
				      </mat-option>
			      </div>

			<!--     </mat-optgroup> -->
			 </mat-select>

			</mat-form-field>
    </form>
  </mat-step>
  <mat-step>
    <form>
      <ng-template matStepLabel>Aktor</ng-template>
      <mat-form-field>
			  <mat-select  class="selectPanel" placeholder="Aktor">
			  <!--   <mat-option>-- None --</mat-option> -->
			   <!--  <mat-optgroup *ngFor="let modules of ApiService.modulesForDevices" [label]="modules.modulename" -->
			                 
			      <mat-option *ngFor="let modules of ApiService.modulesForDevices" [value]="modules.id">
			        {{modules.location}} {{modules.description}}
			      </mat-option>
			<!--     </mat-optgroup> -->
			 </mat-select>
			</mat-form-field>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Fertig</ng-template>
    Fertig?
    <div>
      <button mat-button matStepperPrevious>Zurück</button>
      <button mat-button (click)="stepper.reset()">Speichern</button>
    </div>
  </mat-step>
</mat-vertical-stepper>
	</mat-expansion-panel>


	<mat-expansion-panel>
	  <mat-expansion-panel-header [expandedHeight]="'50px'"  [collapsedHeight]="'50px'" class="timerScene">

	    <mat-panel-title>
	    	<div class="matPanelSceneSymbol"><i class="material-icons md-36 md-violet">access_time</i></div>
	    	
	     	<div class="matPanelSceneText"> Testszene</div>
	    </mat-panel-title>
	    <mat-panel-description>
	      <div class="matPanelSceneText">Szenenbeschreibung</div>
	    </mat-panel-description>

	  </mat-expansion-panel-header>
	 <!--  <div class="szenenContainer"> -->
	  	<!-- <button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button> -->
<mat-vertical-stepper [linear]="isLinear" #stepper>
	<mat-step>
    <form>
      <ng-template matStepLabel>Funktion wählen</ng-template>
      <mat-button-toggle-group #group="matButtonToggleGroup" class="toggleTabGroup">
		  <mat-button-toggle value="left" class="toggleTab">
		   <i class="material-icons md-36 md-light active">weekend</i>
		   <span>Komfort</span>
		  </mat-button-toggle>
		  <mat-button-toggle value="center" class="toggleTab">
		   <i class="material-icons md-36 md-red">verified_user</i>
		   <span>Alarm</span>
		  </mat-button-toggle>
		  <mat-button-toggle value="right" class="toggleTab">
		   <i class="material-icons md-36 md-violet">access_time</i>
		   <span>Timer</span>
		  </mat-button-toggle>
		</mat-button-toggle-group>
    </form>
  </mat-step>
  <mat-step>
    <form>
      <ng-template matStepLabel>Szene benennen & beschreiben</ng-template>
      <mat-form-field>
        <input matInput placeholder="Name" required>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Beschreibung" required>
      </mat-form-field>
  <!--     <div>
        <button mat-button matStepperNext></button>
      </div> -->
    </form>
  </mat-step>
  
  <mat-step>
    <form>
      <ng-template matStepLabel>Auslöser</ng-template>
      <mat-form-field>
			  <mat-select class="selectPanel" placeholder="Auslöser">
			  <!--   <mat-option>-- None --</mat-option> -->
			   <!--  <mat-optgroup *ngFor="let modules of ApiService.modulesForDevices" [label]="modules.modulename" -->
			   	<mat-optgroup label="Vorkonfigurierte Auslöser" >
			   		<mat-option class="preconfigOption1" value="test">
				        Alle Fensterkontakte
				      </mat-option>
				      <mat-option class="preconfigOption1"value="test">
				        Alle Bewegungsmelder
				      </mat-option>
				      <mat-option class="preconfigOption1"value="test">
				        Alle Rauchmelder
				      </mat-option>
				      <mat-option class="preconfigOption1"value="test">
				        Alle Wassermelder
				      </mat-option>
			   	</mat-optgroup>

			      <div *ngFor="let modules of ApiService.modulesForDevices" >
				      <mat-option  class="matOption" *ngIf="modules.type === 2" [value]="modules.id">
				        {{modules.location}} - {{modules.description}}
				      </mat-option>
			      </div>

			<!--     </mat-optgroup> -->
			 </mat-select>

			</mat-form-field>
    </form>
  </mat-step>
  <mat-step>
    <form>
      <ng-template matStepLabel>Aktor</ng-template>
      <mat-form-field>
			  <mat-select  class="selectPanel" placeholder="Aktor">
			  <!--   <mat-option>-- None --</mat-option> -->
			   <!--  <mat-optgroup *ngFor="let modules of ApiService.modulesForDevices" [label]="modules.modulename" -->
			                 
			      <mat-option *ngFor="let modules of ApiService.modulesForDevices" [value]="modules.id">
			        {{modules.location}} {{modules.description}}
			      </mat-option>
			<!--     </mat-optgroup> -->
			 </mat-select>
			</mat-form-field>
    </form>
  </mat-step>
  <mat-step>
    <!-- <ng-template matStepLabel>Fertig</ng-template>
    Fertig?
    <div>
      <button mat-button matStepperPrevious>Zurück</button>
      <button mat-button (click)="stepper.reset()">Speichern</button>
    </div> -->
  </mat-step>
</mat-vertical-stepper>
	</mat-expansion-panel>





	<mat-expansion-panel>
	  <mat-expansion-panel-header [expandedHeight]="'50px'"  [collapsedHeight]="'50px'" class="alarmScene">

	    <mat-panel-title>
	    	<div class="matPanelSceneSymbol"><i class="material-icons md-36 md-red">verified_user</i></div>
	    	
	     	<div class="matPanelSceneText"> Testszene</div>
	    </mat-panel-title>
	    <mat-panel-description>
	      <div class="matPanelSceneText">Szenenbeschreibung</div>
	    </mat-panel-description>

	  </mat-expansion-panel-header>
	 <!--  <div class="szenenContainer"> -->
	  	<!-- <button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button> -->
<mat-vertical-stepper [linear]="isLinear" #stepper>
	<mat-step>
    <form>
      <ng-template matStepLabel>Funktion wählen</ng-template>
      <mat-button-toggle-group #group="matButtonToggleGroup" class="toggleTabGroup">
		  <mat-button-toggle value="left" class="toggleTab">
		   <i class="material-icons md-36 md-light active">weekend</i>
		   <span>Komfort</span>
		  </mat-button-toggle>
		  <mat-button-toggle value="center" class="toggleTab">
		   <i class="material-icons md-36 md-red">verified_user</i>
		   <span>Alarm</span>
		  </mat-button-toggle>
		  <mat-button-toggle value="right" class="toggleTab">
		   <i class="material-icons md-36 md-violet">access_time</i>
		   <span>Timer</span>
		  </mat-button-toggle>
		</mat-button-toggle-group>
    </form>
  </mat-step>
  <mat-step>
    <form>
      <ng-template matStepLabel>Szene benennen & beschreiben</ng-template>
      <mat-form-field>
        <input matInput placeholder="Name" required>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Beschreibung" required>
      </mat-form-field>
  <!--     <div>
        <button mat-button matStepperNext></button>
      </div> -->
    </form>
  </mat-step>
  
  <mat-step>
    <form>
      <ng-template matStepLabel>Auslöser</ng-template>
      <mat-form-field>
			  <mat-select class="selectPanel" placeholder="Auslöser">
			  <!--   <mat-option>-- None --</mat-option> -->
			   <!--  <mat-optgroup *ngFor="let modules of ApiService.modulesForDevices" [label]="modules.modulename" -->
			   	<mat-optgroup label="Vorkonfigurierte Auslöser" >
			   		<mat-option class="preconfigOption1" value="test">
				        Alle Fensterkontakte
				      </mat-option>
				      <mat-option class="preconfigOption1"value="test">
				        Alle Bewegungsmelder
				      </mat-option>
				      <mat-option class="preconfigOption1"value="test">
				        Alle Rauchmelder
				      </mat-option>
				      <mat-option class="preconfigOption1"value="test">
				        Alle Wassermelder
				      </mat-option>
			   	</mat-optgroup>

			      <div *ngFor="let modules of ApiService.modulesForDevices" >
				      <mat-option  class="matOption" *ngIf="modules.type === 2" [value]="modules.id">
				        {{modules.location}} - {{modules.description}}
				      </mat-option>
			      </div>

			<!--     </mat-optgroup> -->
			 </mat-select>

			</mat-form-field>
    </form>
  </mat-step>
  <mat-step>
    <form>
      <ng-template matStepLabel>Aktor</ng-template>
      <mat-form-field>
			  <mat-select  class="selectPanel" placeholder="Aktor">
			  <!--   <mat-option>-- None --</mat-option> -->
			   <!--  <mat-optgroup *ngFor="let modules of ApiService.modulesForDevices" [label]="modules.modulename" -->
			                 
			      <mat-option *ngFor="let modules of ApiService.modulesForDevices" [value]="modules.id">
			        {{modules.location}} {{modules.description}}
			      </mat-option>
			<!--     </mat-optgroup> -->
			 </mat-select>
			</mat-form-field>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Fertig</ng-template>
    Fertig?
    <!-- <div>
      <button mat-button matStepperPrevious>Zurück</button>
      <button mat-button (click)="stepper.reset()">Speichern</button>
    </div> -->
  </mat-step>
</mat-vertical-stepper>
	</mat-expansion-panel>




	<div class="alternate-theme"><button mat-stroked-button class="button1 " color="primary">neue Szene</button></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...