BookStack Code Mirror - bookstack/blob - resources/views/pages/parts/image-manager.blade.php

   1 <div components="image-manager dropzone"
   2      option:dropzone:url="{{ url('/images/gallery?' . http_build_query(['uploaded_to' => $uploaded_to ?? 0])) }}"
   3      option:dropzone:success-message="{{ trans('components.image_upload_success') }}"
   4      option:dropzone:error-message="{{ trans('components.image_upload_failure') }}"
   5      option:dropzone:upload-limit="{{ config('app.upload_limit') }}"
   6      option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
   7      option:dropzone:zone-text="{{ trans('components.image_dropzone_drop') }}"
   8      option:dropzone:file-accept="image/*"
   9      option:image-manager:uploaded-to="{{ $uploaded_to ?? 0 }}"
  10      class="image-manager">
  11
  12     <div component="popup"
  13          refs="image-manager@popup"
  14          class="popup-background">
  15         <div class="popup-body" tabindex="-1">
  16
  17             <div class="popup-header primary-background">
  18                 <div class="popup-title">{{ trans('components.image_select') }}</div>
  19                 <button refs="dropzone@selectButton" type="button">
  20                     <span>@icon('upload')</span>
  21                     <span>{{ trans('components.image_upload') }}</span>
  22                 </button>
  23                 <button refs="popup@hide" type="button" class="popup-header-close">@icon('close')</button>
  24             </div>
  25
  26             <div refs="dropzone@drop-target" class="flex-fill image-manager-body">
  27
  28                 <div class="image-manager-content">
  29                     <div role="tablist" class="image-manager-header primary-background-light grid third no-gap">
  30                         <button refs="image-manager@filterTabs"
  31                                 data-filter="all"
  32                                 role="tab"
  33                                 aria-selected="true"
  34                                 type="button" class="tab-item" title="{{ trans('components.image_all_title') }}">@icon('images') {{ trans('components.image_all') }}</button>
  35                         <button refs="image-manager@filterTabs"
  36                                 data-filter="book"
  37                                 role="tab"
  38                                 aria-selected="false"
  39                                 type="button" class="tab-item" title="{{ trans('components.image_book_title') }}">@icon('book', ['class' => 'svg-icon']) {{ trans('entities.book') }}</button>
  40                         <button refs="image-manager@filterTabs"
  41                                 data-filter="page"
  42                                 role="tab"
  43                                 aria-selected="false"
  44                                 type="button" class="tab-item" title="{{ trans('components.image_page_title') }}">@icon('page', ['class' => 'svg-icon']) {{ trans('entities.page') }}</button>
  45                     </div>
  46                     <div>
  47                         <form refs="image-manager@searchForm" class="contained-search-box">
  48                             <input refs="image-manager@searchInput"
  49                                    placeholder="{{ trans('components.image_search_hint') }}"
  50                                    type="text">
  51                             <button refs="image-manager@cancelSearch"
  52                                     title="{{ trans('common.search_clear') }}"
  53                                     type="button"
  54                                     class="cancel">@icon('close')</button>
  55                             <button type="submit" class="primary-background text-white"
  56                                     title="{{ trans('common.search') }}">@icon('search')</button>
  57                         </form>
  58                     </div>
  59                     <div refs="image-manager@listContainer" class="image-manager-list"></div>
  60                 </div>
  61
  62                 <div class="image-manager-sidebar flex-container-column">
  63
  64                     <div refs="image-manager@dropzoneContainer">
  65                         <div refs="dropzone@status-area"></div>
  66                     </div>
  67
  68                     <div refs="image-manager@form-container-placeholder" class="p-m text-small text-muted">
  69                         <p>{{ trans('components.image_intro') }}</p>
  70                         <p>{{ trans('components.image_intro_upload') }}</p>
  71                     </div>
  72
  73                     <div refs="image-manager@formContainer" class="inner flex">
  74                     </div>
  75                 </div>
  76
  77             </div>
  78
  79             <div class="popup-footer">
  80                 <button refs="image-manager@selectButton" type="button" class="hidden button">
  81                     {{ trans('components.image_select_image') }}
  82                 </button>
  83             </div>
  84
  85         </div>
  86     </div>
  87 </div>