filedetails.component.html 7.21 KB
Newer Older
Ooh-Ao committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208
<app-page-header
  [title]="'FileManager Details'"
  [title1]="'FileManager Details'"
  [activeitem]="'Advanced UI'"
></app-page-header>

<!-- Start::row-1 -->
<div class="grid grid-cols-12 xl:gap-6">
  <div class="col-span-12 xl:col-span-8">
    <div class="box">
      <div class="box-body space-y-4">
        <img
          class="rounded-sm"
          src="./assets/img/gallery/8.jpg"
          alt="Image Description"
        />
        <div class="sm:flex justify-between space-y-2 sm:space-y-0">
          <div class="flex space-x-2 rtl:space-x-reverse">
            <i
              class="ri ri-image-line text-primary p-2 leading-none bg-primary/20 rounded-sm"
            ></i>
            <h3 class="my-auto font-bold">Nature.jpg</h3>
          </div>
          <div class="flex space-x-3 rtl:space-x-reverse">
            <i
              class="ri ri-edit-2-line p-2 leading-none bg-gray-200 text-gray-500 dark:text-white/70 dark:bg-black/20 rounded-sm"
            ></i>
            <i
              class="ri ri-star-line p-2 leading-none bg-gray-200 text-gray-500 dark:text-white/70 dark:bg-black/20 rounded-sm"
            ></i>
            <i
              class="ri ri-share-line p-2 leading-none bg-gray-200 text-gray-500 dark:text-white/70 dark:bg-black/20 rounded-sm"
            ></i>
            <i
              class="ri ri-download-2-line p-2 leading-none bg-gray-200 text-gray-500 dark:text-white/70 dark:bg-black/20 rounded-sm"
            ></i>
            <i
              class="ri ri-delete-bin-6-line p-2 leading-none bg-gray-200 text-gray-500 dark:text-white/70 dark:bg-black/20 rounded-sm"
            ></i>
          </div>
        </div>
      </div>
    </div>
    <div class="box related-files">
      <div class="box-header">
        <h5 class="box-title">Related Files</h5>
      </div>
      <div class="box-body">
        <owl-carousel-o [options]="customOptions" class="swiper mySwiper">
          <ng-container
            *ngFor="let slide of slidesStore"
            class="swiper-wrapper"
          >
            <ng-template carouselSlide >
              <div class="box mb-0 overflow-hidden">
                <div class="box-body">
                  <a href="javascript:void(0);" class="mx-auto my-3"
                    ><img class="mx-auto" [src]="slide.src" alt="img"
                  /></a>
                </div>
                <div class="box-footer bg-transparent">
                  <div class="flex justify-between">
                    <div>
                      <p class="text-sm">{{ slide.title }}</p>
                    </div>
                    <div class="swiper-text">
                      <p class="text-sm">{{ slide.size }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </ng-template>
          </ng-container>
        </owl-carousel-o>
      </div>
    </div>
  </div>
  <div class="col-span-12 xl:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">File Details</h5>
      </div>
      <div class="box-body p-0">
        <div class="rounded-sm overflow-auto">
          <table class="ti-custom-table ti-custom-table-head">
            <tbody>
              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Type</td>
                <td>Jpg File(.jpg)</td>
              </tr>

              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Location</td>
                <td>file/gallery</td>
              </tr>

              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Size</td>
                <td>909KB</td>
              </tr>

              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Created Date</td>
                <td>1-10-2022</td>
              </tr>

              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Modified Date</td>
                <td>12-10-2022</td>
              </tr>

              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">Dimensions</td>
                <td>7360 * 4912</td>
              </tr>
              <tr class="divide-x divide-gray-200 dark:divide-white/10">
                <td class="font-medium">File Location</td>
                <td>Device/Storage/Archives/AMB-2012.zip</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">File Description</h5>
      </div>
      <div class="box-body">
        <p class="mb-3">
          This file contains 3 folder Synto.main &amp; Synto.premium &amp;
          Synto.featured and 42 images and layout styles are added in this
          update.
        </p>
        <h5 class="font-semibold text-slate-700 dark:text-white text-sm">
          Shared With :-
        </h5>
        <div class="flex -space-x-2 rtl:space-x-reverse mt-2 overflow-auto">
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/1.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/4.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/6.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/5.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/7.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/2.jpg"
            alt="Image Description"
          />
          <img
            class="avatar avatar-sm rounded-full"
            src="./assets/img/users/9.jpg"
            alt="Image Description"
          />
          <span
            class="inline-flex items-center justify-center h-[2.375rem] w-[2.375rem] rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10"
          >
            <span
              class="font-medium text-gray-500 leading-none dark:text-white/70"
              >9+</span
            >
          </span>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Recent Files</h5>
      </div>
      <div class="box-body">
        <div class="relative recent-files">
          <div class="sm:grid grid-cols-12 gap-6 sm:space-y-0 space-y-6">
            <div class="col-span-12">
              <div class="inner">
                <ks-plain-gallery
                  [id]="200"
                  [images]="imagesRect"
                  [config]="libConfigPlainGalleryRow"
                  (clickImage)="onShow(200, $event)"
                ></ks-plain-gallery>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->