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('errors.image_upload_error') }}"
   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:dropzone:allow-multiple="true"
  10      option:image-manager:uploaded-to="{{ $uploaded_to ?? 0 }}"
  11      class="image-manager">
  12
  13     <div component="popup"
  14          refs="image-manager@popup"
  15          class="popup-background">
  16         <div class="popup-body" tabindex="-1">
  17
  18             <div class="popup-header primary-background">
  19                 <div class="popup-title">{{ trans('components.image_select') }}</div>
  20                 <button refs="dropzone@selectButton image-manager@uploadButton" type="button">
  21                     <span>@icon('upload')</span>
  22                     <span>{{ trans('components.image_upload') }}</span>
  23                 </button>
  24                 <button refs="popup@hide" type="button" class="popup-header-close">@icon('close')</button>
  25             </div>
  26
  27             <div component="tabs"
  28                  option:tabs:active-under="880"
  29                  refs="dropzone@drop-target"
  30                  class="flex-container-column image-manager-body">
  31                 <div class="tab-container">
  32                     <div role="tablist" class="hide-over-m mb-none">
  33                         <button id="image-manager-list-tab"
  34                                 aria-selected="true"
  35                                 aria-controls="image-manager-list"
  36                                 role="tab">{{ trans('components.image_list') }}</button>
  37                         <button id="image-manager-info-tab"
  38                                 aria-selected="true"
  39                                 aria-controls="image-manager-info"
  40                                 role="tab">{{ trans('components.image_details') }}</button>
  41                     </div>
  42                 </div>
  43                 <div class="flex-container-row flex-fill flex">
  44                     <div id="image-manager-list"
  45                          tabindex="0"
  46                          role="tabpanel"
  47                          aria-labelledby="image-manager-list-tab"
  48                          class="image-manager-content">
  49                         <div class="image-manager-filter-bar flex-container-row wrap justify-space-between">
  50                             <div class="primary-background image-manager-filter-bar-bg"></div>
  51                             <div>
  52                                 <form refs="image-manager@searchForm" class="contained-search-box floating mx-m my-s">
  53                                     <input refs="image-manager@searchInput"
  54                                            placeholder="{{ trans('components.image_search_hint') }}"
  55                                            type="text">
  56                                     <button refs="image-manager@cancelSearch"
  57                                             title="{{ trans('common.search_clear') }}"
  58                                             type="button"
  59                                             hidden="hidden"
  60                                             class="cancel">@icon('close')</button>
  61                                     <button type="submit"
  62                                             title="{{ trans('common.search') }}">@icon('search')</button>
  63                                 </form>
  64                             </div>
  65                             <div class="tab-container bordered mx-m my-s">
  66                                 <div role="tablist" class="image-manager-filters flex-container-row mb-none">
  67                                     <button refs="image-manager@filterTabs"
  68                                             data-filter="all"
  69                                             role="tab"
  70                                             aria-selected="true"
  71                                             type="button"
  72                                             title="{{ trans('components.image_all_title') }}">@icon('images')</button>
  73                                     <button refs="image-manager@filterTabs"
  74                                             data-filter="book"
  75                                             role="tab"
  76                                             aria-selected="false"
  77                                             type="button"
  78                                             title="{{ trans('components.image_book_title') }}">@icon('book', ['class' => 'svg-icon'])</button>
  79                                     <button refs="image-manager@filterTabs"
  80                                             data-filter="page"
  81                                             role="tab"
  82                                             aria-selected="false"
  83                                             type="button"
  84                                             title="{{ trans('components.image_page_title') }}">@icon('page', ['class' => 'svg-icon'])</button>
  85                                 </div>
  86                             </div>
  87                         </div>
  88                         <div refs="image-manager@listContainer" class="image-manager-list"></div>
  89                         <div refs="image-manager@loadMore" class="load-more" hidden>
  90                             <button type="button" class="button small outline">Load More</button>
  91                         </div>
  92                     </div>
  93
  94                     <div id="image-manager-info"
  95                          tabindex="0"
  96                          role="tabpanel"
  97                          aria-labelledby="image-manager-info-tab"
  98                          class="image-manager-sidebar flex-container-column">
  99
 100                         <div refs="image-manager@dropzoneContainer">
 101                             <div refs="dropzone@status-area"></div>
 102                         </div>
 103
 104                         <div refs="image-manager@form-container-placeholder" class="p-m text-small text-muted">
 105                             <p>{{ trans('components.image_intro') }}</p>
 106                             <p refs="image-manager@upload-hint">{{ trans('components.image_intro_upload') }}</p>
 107                         </div>
 108
 109                         <div refs="image-manager@formContainer" class="inner flex">
 110                         </div>
 111                     </div>
 112                 </div>
 113             </div>
 114
 115             <div class="popup-footer">
 116                 <button refs="image-manager@selectButton" type="button" class="hidden button">
 117                     {{ trans('components.image_select_image') }}
 118                 </button>
 119             </div>
 120
 121         </div>
 122     </div>
 123 </div>