Projekt

Obecné

Profil

« Předchozí | Další » 

Revize b9ead6a3

Přidáno uživatelem Ondřej Váně před asi 5 roky(ů)

Re #7817: Responzivní navigační lišta

- přidání select boxu pro výběr jazyka

Zobrazit rozdíly:

fe/fulltextsearch/src/app/components/layout/main-nav/main-nav.component.css
98 98 
mat-sidenav-content {
99 99 
  margin-top: 56px;
100 100 
}
101 

  		




  
  102
  
    
select {


  		




  
  103
  
    
  background-color: var(--primary-color);


  		




  
  104
  
    
  color: white;


  		




  
  105
  
    
  border-color: var(--primary-color);


  		




  
  106
  
    
  font-size: 18px;


  		




  
  107
  
    
  font-weight: bold;


  		




  
  108
  
    
  font-family: Roboto, "Helvetica Neue", sans-serif;;


  		




  
  109
  
    
}


  		












  

    
      fe/fulltextsearch/src/app/components/layout/main-nav/main-nav.component.html
    
  





  24
  24
  
    
      <a mat-list-item routerLink="help">


  		




  25
  25
  
    
        <mat-icon>help</mat-icon>


  		




  26
  26
  
    
        Help</a>


  		




  27
  
  
    
      <a mat-list-item>


  		




  28
  
  
    
        <mat-icon>translate</mat-icon>


  		




  29
  
  
    
        EN</a>


  		




  30
  27
  
    
    </mat-nav-list>


  		




  31
  28
  
    
  </mat-sidenav>


  		




  32
  29
  
    
  <mat-sidenav-content>


  		




  ......




  51
  48
  
    
      <a mat-button routerLink="browse" *ngIf="!(isHandset$ | async)">Browse</a>


  		




  52
  49
  
    
      <a mat-button routerLink="upload" *ngIf="!(isHandset$ | async)">Upload</a>


  		




  53
  50
  
    
      <!-- navigation items space -->


  		




  54
  
  
    
      <div class="space" *ngIf="!(isHandset$ | async)"></div>


  		




  
  51
  
    
      <div class="space"></div>


  		




  55
  52
  
    
      <!-- right navigation items -->


  		




  56
  53
  
    
      <a mat-button (click)="openAboutDialog()" *ngIf="!(isHandset$ | async)">About</a>


  		




  57
  54
  
    
      <a mat-button routerLink="help" *ngIf="!(isHandset$ | async)">Help</a>


  		




  58
  
  
    
      <a mat-button *ngIf="!(isHandset$ | async)">EN</a>


  		




  
  55
  
    
      <select (change)="onLanguageSelect($event)">


  		




  
  56
  
    
        <option *ngFor="let language of languages">{{language}}</option>


  		




  
  57
  
    
      </select>


  		




  59
  58
  
    
    </mat-toolbar>


  		




  60
  59
  
    
    <ng-content></ng-content>


  		




  61
  60
  
    
  </mat-sidenav-content>


  		












  

    
      fe/fulltextsearch/src/app/components/layout/main-nav/main-nav.component.ts
    
  





  4
  4
  
    
import { map, shareReplay } from 'rxjs/operators';


  		




  5
  5
  
    
import { AboutDialogComponent } from '../../shared-components/about-dialog/about-dialog.component';


  		




  6
  6
  
    
import {MatDialog} from '@angular/material/dialog';


  		




  
  7
  
    
import {LoggerService} from '../../../services/logger/logger.service';


  		




  7
  8
  
    

  		




  8
  9
  
    
@Component({


  		




  9
  10
  
    
  selector: 'app-main-nav',


  		




  ......




  12
  13
  
    
})


  		




  13
  14
  
    
export class MainNavComponent {


  		




  14
  15
  
    

  		




  
  16
  
    
  languages: string[] = ['EN', 'DE', 'CZ'];


  		




  
  17
  
    

  		




  15
  18
  
    
  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)


  		




  16
  19
  
    
    .pipe(


  		




  17
  20
  
    
      map(result => result.matches),


  		




  18
  21
  
    
      shareReplay()


  		




  19
  22
  
    
    );


  		




  20
  23
  
    

  		




  21
  
  
    
  constructor(private breakpointObserver: BreakpointObserver, public dialog: MatDialog) {}


  		




  
  24
  
    
  constructor(private breakpointObserver: BreakpointObserver,


  		




  
  25
  
    
              public dialog: MatDialog,


  		




  
  26
  
    
              private LOGGER: LoggerService) {}


  		




  22
  27
  
    

  		




  23
  28
  
    
  openAboutDialog() {


  		




  24
  29
  
    
    this.dialog.open(AboutDialogComponent, { panelClass: 'custom-dialog-container' });


  		




  25
  30
  
    
  }


  		




  26
  31
  
    

  		




  
  32
  
    
  onLanguageSelect(event) {


  		




  
  33
  
    
    console.log(event.target.value);


  		




  
  34
  
    
    this.LOGGER.error('Selected language ' + event.target.value);


  		




  
  35
  
    
  }


  		




  
  36
  
    

  		




  27
  37
  
    
}


  		












  

    
      fe/fulltextsearch/src/app/components/pages/browse/browse.component.css
    
  





  1
  1
  
    
.text-box{


  		




  2
  2
  
    
  width: 80%;


  		




  3
  
  
    
  margin: 20px auto;


  		




  
  3
  
    
  margin: auto;


  		




  4
  4
  
    
}


  		




  5
  5
  
    

  		




  6
  6
  
    
.card-header {


  		












  

    
      fe/fulltextsearch/src/app/components/pages/upload/upload.component.css
    
  





  5
  5
  
    
.text-box {


  		




  6
  6
  
    
  margin: auto;


  		




  7
  7
  
    
  width: 80%;


  		




  8
  
  
    
  padding: 10px;


  		




  9
  8
  
    
}


  		




  10
  9
  
    

  		




  11
  10
  
    
input {


  		












Také k dispozici:  Unified diff