my file page

src/app/pages/myfiles/myfiles.page.html

@@ -24,24 +24,69 @@
     <div class="ion-padding">
 
       <div class="flex">
-        <ion-label class="bold_text">My Files</ion-label>
+        <ion-label class="bold_text" style="margin-bottom: 10px;">My Files</ion-label>
         <!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
       </div>
 
+      <ion-accordion-group>
+        <ion-accordion value="first" style="border-radius: 10px">
+          <ion-item slot="header" color="secondary">
+            <ion-label>Add New File(s)</ion-label>
+          </ion-item>
+          <div class="ion-padding" slot="content">
+
+            <ion-card style="margin: 0px;">
+              <ion-card-content  style="padding: 1px;">
+                <ion-textarea
+                        style="background-color: aliceblue; margin: 0px; min-height: 100px"
+                        label="File description ..."
+                        placeholder="Enter file description"
+                        [(ngModel)]='yourmessage' ></ion-textarea>
+              </ion-card-content>
+              <ion-grid>
+                <ion-row>
+                  <ion-col>
+
+                  </ion-col>
+
+                  <ion-col style="text-align: right;">
+                    <ion-button fill="outline"  color="secondary" (click)="startCamera(100)">
+                      <ion-icon slot="icon-only" name="camera-reverse-outline"></ion-icon>
+                    </ion-button>
+                    <ion-button fill="outline" style="margin-left: 10px;" (click)="startCamera(0)">
+                      <ion-icon slot="icon-only" name="folder-outline"></ion-icon>
+                    </ion-button>
+                  </ion-col>
+
+                </ion-row>
+              </ion-grid>
+
+              <ion-label class="description">{{interest_msg_status}}
+              </ion-label>
+            </ion-card>
 
 
-      <ion-segment [(ngModel)]="tabs">
-        <ion-segment-button value="myfiles">
-          <ion-label>Files</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="uploadnew">
-          <ion-label>Upload New</ion-label>
-        </ion-segment-button>
-      </ion-segment>
+
+          </div>
+        </ion-accordion>
+
+      </ion-accordion-group>
+
+
+<!--      <ion-segment class = "common_segment" [(ngModel)]="tabs">-->
+<!--        <ion-segment-button value="myfiles">-->
+<!--          <ion-label>My Files</ion-label>-->
+<!--        </ion-segment-button>-->
+<!--        <ion-segment-button value="uploadnew">-->
+<!--          <ion-label>Add New</ion-label>-->
+<!--        </ion-segment-button>-->
+<!--      </ion-segment>-->
 
 <!--      https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1/getmedia/session_id/myfile/file_uid-->
 
-      <div *ngIf="tabs =='myfiles'" class="lesson">
+<!--      <div *ngIf="tabs =='myfiles'" class="lesson">-->
+
+      <div  class="lesson">
 
         <div class="video" *ngFor="let item of myFilesData">
           <div class="left">
@@ -62,17 +107,7 @@
 
       <div *ngIf="tabs =='uploadnew'" class="lesson">
 
-        <ion-card>
-          <img alt="Silhouette of mountains" src="https://www.wrenchboard.com/assets/images/apps/upload.jpg" />
-          <ion-card-header>
-            <ion-card-title>Upload Files</ion-card-title>
-            <ion-card-subtitle>Add files to your resources</ion-card-subtitle>
-          </ion-card-header>
 
-          <ion-card-content>
-            You can upload files from your web account.
-          </ion-card-content>
-        </ion-card>
 
       </div>