botones incluidos en un menu desplegable (aún sin formato)

package-lock.json

@@ -358,6 +358,31 @@
         }
       }
     },
+    "@angular/animations": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-11.2.1.tgz",
+      "integrity": "sha512-U2gtMaiVfTNMn0FPpSDTgOgtYc45QUnQcc2Po40rCmgH7BGyJAOgmaXY9uv319Jjl+vNrX+bbXaZix73Zpjfyg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@angular/cdk": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.1.tgz",
+      "integrity": "sha512-d+ERvvWqGykBm5ooWG8TmMjL6q6aOpUd13ha1sx960EfKJqNyideYUfPMp6xprTyxmUIUZ/G9AQ/pxnzrLGnsA==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "10.0.8",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-10.0.8.tgz",
@@ -832,6 +857,14 @@
       "integrity": "sha512-QQLYUjD0T6u2hLNYXUEUbupAGsz5egmhCAckaQojvXCe3SLL/hQsrK4odrNuspy7TvMB0H5ZNEHGlF6m/WLZ3g==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.1.tgz",
+      "integrity": "sha512-unHC8W+GcZSNRNSZ4l3ABdbezf6PIUtShx5MMG6HXgieqlkEgkU0W0BAeGvO/61vl6yEebizMYD/+5yqM9lUlw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "10.0.14",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.0.14.tgz",

package.json

@@ -13,9 +13,12 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/animations": "^11.2.1",
+    "@angular/cdk": "^11.2.1",
     "@angular/common": "~10.0.0",
     "@angular/core": "~10.0.0",
     "@angular/forms": "~10.0.0",
+    "@angular/material": "^11.2.1",
     "@angular/platform-browser": "~10.0.0",
     "@angular/platform-browser-dynamic": "~10.0.0",
     "@angular/router": "~10.0.0",
@@ -75,4 +78,4 @@
       "android"
     ]
   }
-}
+}

src/app/app.module.ts

@@ -11,12 +11,14 @@ import { AppComponent } from './app.component';
 import { PerfilDiscotecaPage } from './perfil-discoteca/perfil-discoteca.page';
 import { PromptEventoPage} from './prompt-evento/prompt-evento.page'
 import { GaleriamodalPageModule } from './galeriamodal/galeriamodal.module';
+import { MatMenuModule } from '@angular/material/menu';
 import { LoginPage } from './login/login.page';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 
 @NgModule({
   declarations: [AppComponent, PerfilDiscotecaPage, PromptEventoPage, LoginPage],
   entryComponents: [],
-  imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule, ReactiveFormsModule, GaleriamodalPageModule],
+  imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule, ReactiveFormsModule, GaleriamodalPageModule, MatMenuModule, BrowserAnimationsModule],
   providers: [
     StatusBar,
     SplashScreen,

src/app/perfil-discoteca/perfil-discoteca.page.html

@@ -8,40 +8,13 @@
 
 <ion-content [fullscreen]="true">
 
-
-  
     <div class='fotoPerfil'>
       <ion-grid>
       <ion-row>
-        <ion-col>
           <ion-img class="fotoPerfil" width="100%" height="100%" [src]='fotoSrc' alt='barraquinha'></ion-img>
           <div class="textoPie">{{nombre}}</div>
-
-          <div class="addFoto">
-            <ion-button [disabled]='editDisabled'>
-              <ion-icon name="image" slot="icon-only"></ion-icon>
-              <input type="file" (change)="loadImageFromDevice($event);cargarImagen()" id="file-input-perfil" accept="image/png, image/jpeg">
-            </ion-button>
-          </div>
-
-          <div>
-            <ion-button (click)="enableEdit()" label="editar" [disabled]='editEnabled'>
-              <ion-icon name="create"></ion-icon>
-            </ion-button>
-            <div id="botonesHidden1" class="botonesHidden">
-              <ion-button (click)="saveEdit()" label="guardar" [disabled]='editDisabled'>
-              <ion-icon name="save"></ion-icon>
-            </ion-button>
-            <ion-button (click)="cancelEdit()" [disabled]='editDisabled'>
-              Cancelar
-            </ion-button></div>
-          </div>
-          
-
-
-        </ion-col>
       </ion-row>
-    
+
 
       <ion-row>
         <ion-col>
@@ -52,10 +25,16 @@
             <div [contentEditable]='editEnabled'>{{localizacion}}</div>
           </div>
         </ion-col>
-
+        
         <ion-col>
+          <div>{{descripcion}}</div>
+        </ion-col>
+      </ion-row>
+
+      <ion-row>
           <div class="galeria">
             Galería de Fotos
+
             <input type="file" (change)="loadImageFromDevice($event)" id="file-input-galeria" accept="image/png, image/jpeg">
             <ion-slides (ionDrag)="onSlideChanged()" [options]="sliderOpts">
               <ion-slide *ngFor="let foto of galeriaFotos">
@@ -69,18 +48,8 @@
               </ion-slide>
             </ion-slides>
           </div>
-        </ion-col>
       </ion-row>
       
-      
-      <ion-row>
-          <ion-button (click)="addEvento()">
-            <ion-icon name="add-circle-outline">
-            </ion-icon>
-            Añadir evento
-          </ion-button>
-      </ion-row>
-
       <ion-row>
         <div *ngIf="eventos.length>0" class="eventos">
           <ion-list>
@@ -102,13 +71,40 @@
           </ion-list>
         </div>
       </ion-row>
+
+      <ion-row>
+        <button mat-icon-button [matMenuTriggerFor]="menu">
+          <ion-icon name="create"></ion-icon>
+        </button>
+
+        <mat-menu #menu="matMenu">
+        <button mat-menu-item [disabled]='editDisabled'>
+          <ion-icon name="image" slot="icon-only"></ion-icon>
+          <input type="file" (change)="loadImageFromDevice($event);cargarImagen()" id="file-input-perfil" accept="image/png, image/jpeg">
+        </button>
+
+
+        <button mat-menu-item (click)="enableEdit()" label="editar" [disabled]='editEnabled'>
+          <ion-icon name="create"></ion-icon>
+        </button>
+
+        <button mat-menu-item (click)="saveEdit()" label="guardar" [disabled]='editDisabled'>
+        <ion-icon name="save"></ion-icon>
+        </button>
+
+        <button mat-menu-item (click)="cancelEdit()" [disabled]='editDisabled'>
+          Cancelar
+        </button>
+
+        <button mat-menu-item (click)="addEvento()">
+          <ion-icon name="add-circle-outline">
+          </ion-icon>
+          Añadir evento
+        </button>
+
+      </mat-menu>
+      </ion-row>
     </ion-grid>  
     </div>
 
-  
-
-
-
-
-
 </ion-content>

src/app/perfil-discoteca/perfil-discoteca.page.ts

@@ -5,6 +5,7 @@ import { AlertController } from '@ionic/angular';
 import { ViewChild } from '@angular/core';
 import { Evento } from '../evento';
 import { Router } from '@angular/router';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
 import { GaleriamodalPage } from '../galeriamodal/galeriamodal.page';
 import { stringify } from '@angular/compiler/src/util';
@@ -17,6 +18,7 @@ import { stringify } from '@angular/compiler/src/util';
 export class PerfilDiscotecaPage implements OnInit {
 
   @ViewChild('IonSlides') slides: IonSlides;
+  @ViewChild('MatMenuTrigger') trigger: MatMenuTrigger;
   nombre: string;
   telefono: number;
   localizacion: string;