362 lines
17 KiB
HTML
362 lines
17 KiB
HTML
<div class="header">
|
|
<div class="title">
|
|
<div class="submenu">
|
|
<a ng-click="openDialog()" os-perms="mediafiles.can_upload" class="btn btn-primary btn-sm">
|
|
<i class="fa fa-plus fa-lg"></i>
|
|
<translate>New</translate>
|
|
</a>
|
|
</div>
|
|
<h1 translate>Files</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="meta" os-perms="core.can_manage_projector">
|
|
<div class="title" ng-click="isMeta = !isMeta">
|
|
<div class="name">
|
|
<i class="fa fa-play-circle"></i>
|
|
<translate>Presentation control elements</translate>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fa fa-lg" ng-class="isMeta ? 'fa-angle-down' : 'fa-angle-up'"></i>
|
|
</div>
|
|
</div>
|
|
<div class="detail" uib-collapse="isMeta">
|
|
<!-- mediafile pdf controls -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div ng-repeat="presentedMediafile in presentedMediafiles">
|
|
<h3>{{ getTitle(presentedMediafile) }}</h3>
|
|
<!-- PDF -->
|
|
<nav ng-show="getType(presentedMediafile) === 'pdf'" ng-class="getNavStyle(scroll)" class="form-inline">
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileGoToPage(presentedMediafile, presentedMediafile.page - 1)"
|
|
ng-class="{ 'disabled': (presentedMediafile.page - 1) < 1 }"
|
|
title="{{ 'Previous page' | translate }}">
|
|
<i class="fa fa-backward"></i>
|
|
</button>
|
|
<button class="btn btn-default" ng-click="mediafileGoToPage(presentedMediafile, presentedMediafile.page + 1)"
|
|
ng-class="{ 'disabled': (presentedMediafile.page + 1) > presentedMediafile.numPages }"
|
|
title="{{ 'Next page' | translate }}">
|
|
<i class="fa fa-forward"></i>
|
|
</button>
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-group-addon" translate>Page</span>
|
|
<input type="number" min=1 ng-model="presentedMediafile.page" class="form-control" style="width: 80px"
|
|
ng-change="mediafileGoToPage(presentedMediafile, presentedMediafile.page)">
|
|
<span class="input-group-addon"><translate>of</translate> {{presentedMediafile.numPages}}</span>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileRotate(presentedMediafile)"
|
|
title="{{ 'Rotate clockwise' | translate }}">
|
|
<i class="fa fa-repeat"></i>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileZoomOut(presentedMediafile)"
|
|
title="{{ 'Zoom out' | translate }}">
|
|
<i class="fa fa-search-minus"></i>
|
|
</button>
|
|
<button class="btn" ng-click="mediafileFit(presentedMediafile)"
|
|
title="{{ 'Reset zoom' | translate }}"
|
|
ng-class="presentedMediafile.scale=='page-fit' ? 'btn-primary' : 'btn-default'">
|
|
<i class="fa fa-arrows-alt"></i>
|
|
</button>
|
|
<button class="btn btn-default" ng-click="mediafileZoomIn(presentedMediafile)"
|
|
title="{{ 'Zoom in' | translate }}">
|
|
<i class="fa fa-search-plus"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Image -->
|
|
<nav ng-show="getType(presentedMediafile) === 'image'" ng-class="getNavStyle(scroll)" class="form-inline">
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileToggleFullscreen(presentedMediafile)"
|
|
title="{{ 'Toggle fullscreen' | translate }}"
|
|
ng-class="presentedMediafile.fullscreen ? 'btn-primary' : 'btn-default'">
|
|
<i class="fa fa-arrows-alt"></i>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileRotate(presentedMediafile)"
|
|
title="{{ 'Rotate clockwise' | translate }}">
|
|
<i class="fa fa-repeat"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Video -->
|
|
<nav ng-show="getType(presentedMediafile) === 'video'" ng-class="getNavStyle(scroll)" class="form-inline">
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileToggleFullscreen(presentedMediafile)"
|
|
title="{{ 'Toggle fullscreen' | translate }}"
|
|
ng-class="presentedMediafile.fullscreen ? 'btn-primary' : 'btn-default'">
|
|
<i class="fa fa-arrows-alt"></i>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileTogglePlaying(presentedMediafile)"
|
|
title="{{ 'Start/stop video' | translate }}">
|
|
<i class="fa" ng-class="presentedMediafile.playing ? 'fa-stop' : 'fa-play'"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div ng-show="!presentedMediafiles.length" class="spacer">
|
|
<i translate>No media file projected.</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="details">
|
|
<div class="row form-group">
|
|
<div class="col-sm-6">
|
|
<form class="form-inline">
|
|
<!-- select mode -->
|
|
<button os-perms="mediafiles.can_manage" class="btn btn-sm"
|
|
ng-class="$parent.isSelectMode ? 'btn-primary' : 'btn-default'"
|
|
ng-click="$parent.isSelectMode = !$parent.isSelectMode; uncheckAll()">
|
|
<i class="fa fa-check-square-o"></i>
|
|
<translate>Select ...</translate>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="col-sm-6"></div>
|
|
</div>
|
|
<div uib-collapse="!isSelectMode" class="row spacer">
|
|
<div class="col-sm-12 text-left">
|
|
<!-- delete button -->
|
|
<a ng-show="isSelectMode"
|
|
os-perms="mediafiles.can_manage" ng-click="deleteMultiple()"
|
|
class="btn btn-default btn-sm btn-danger">
|
|
<i class="fa fa-trash fa-lg"></i>
|
|
<translate>Delete selected mediafiles</translate>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spacer-top-lg italic">
|
|
{{ mediafilesFiltered.length }} /
|
|
{{ mediafiles.length }} {{ "files" | translate }}<span ng-if="(mediafiles|filter:{selected:true}).length > 0">,
|
|
{{(mediafiles|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
|
|
</div>
|
|
|
|
<div class="os-table container-fluid">
|
|
<div class="row header-row">
|
|
<div class="col-xs-1 centered" ng-show="isSelectMode" os-perms="mediafiles.can_manage">
|
|
<i class="fa text-danger pointer" ng-class="selectedAll ? 'fa-check-square-o' : 'fa-square-o'"
|
|
ng-click="checkAll()"></i>
|
|
</div>
|
|
<div class="col-xs-11 main-header">
|
|
<span class="form-inline text-right pull-right">
|
|
<!-- reset Filters -->
|
|
<span class="sort-spacer pointer" ng-click="filter.reset()"
|
|
ng-if="filter.areFiltersSet()" ng-disabled="isSelectMode"
|
|
ng-class="{'disabled': isSelectMode}">
|
|
<i class="fa fa-times-circle"></i>
|
|
<translate>Filter</translate>
|
|
</span>
|
|
<!-- boolean Filters -->
|
|
<span ng-repeat="(name, booleanFilter) in filter.booleanFilters"
|
|
ng-if="!booleanFilter.needExtraPermission || operator.hasPerms('mediafiles.can_see_hidden')" uib-dropdown>
|
|
<span class="pointer" id="dropdown{{ name }}" uib-dropdown-toggle
|
|
ng-class="{'bold': booleanFilter.value !== undefined, 'disabled': isSelectMode}"
|
|
ng-disabled="isSelectMode">
|
|
{{ booleanFilter.displayName | translate }}
|
|
<span class="caret"></span>
|
|
</span>
|
|
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown{{ name }}">
|
|
<li>
|
|
<a href ng-click="booleanFilter.value = (booleanFilter.value ? undefined : true); filter.save();">
|
|
<i class="fa" ng-class="{'fa-check': booleanFilter.value === true}"></i>
|
|
{{ booleanFilter.choiceYes | translate }}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href ng-click="booleanFilter.value = (booleanFilter.value === false) ? undefined : false; filter.save();">
|
|
<i class="fa" ng-class="{'fa-check': booleanFilter.value === false}"></i>
|
|
{{ booleanFilter.choiceNo | translate }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</span>
|
|
<!-- dropdown sort -->
|
|
<span uib-dropdown>
|
|
<span class="pointer" id="dropdownSort" uib-dropdown-toggle
|
|
ng-class="{'disabled': isSelectMode}"
|
|
ng-disabled="isSelectMode">
|
|
<translate>Sort</translate>
|
|
<span class="caret"></span>
|
|
</span>
|
|
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownSort">
|
|
<li ng-repeat="option in sortOptions">
|
|
<a href ng-click="sort.toggle(option.name)">
|
|
{{ option.display_name | translate }}
|
|
<span class="spacer-right pull-right"></span>
|
|
<i class="pull-right fa"
|
|
ng-style="{'visibility': sort.column === option.name ? 'visible' : 'hidden'}"
|
|
ng-class="sort.reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
|
|
</i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</span>
|
|
<!-- search field -->
|
|
<span class="form-group">
|
|
<span class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-search"></i></span>
|
|
<input type="text" ng-model="filter.filterString" class="form-control"
|
|
placeholder="{{ 'Search' | translate}}" ng-disabled="isSelectMode"
|
|
ng-change="filter.save()">
|
|
</span>
|
|
</span>
|
|
</span>
|
|
<!-- show all selected multiselectoptions -->
|
|
<span>
|
|
<!-- for all boolean Filters -->
|
|
<span ng-repeat="(name, booleanFilter) in filter.booleanFilters"
|
|
ng-hide="booleanFilter.value === undefined"
|
|
class="pointer spacer-left-lg"
|
|
ng-click="booleanFilter.value = undefined; filter.save();"
|
|
ng-class="{'disabled': isSelectMode}">
|
|
<span class="nobr">
|
|
<i class="fa fa-times-circle"></i>
|
|
{{ booleanFilter.value ? booleanFilter.choiceYes : booleanFilter.choiceNo | translate }}
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- main table -->
|
|
<div class="row data-row" ng-mouseover="mediafile.hover=true"
|
|
ng-mouseleave="mediafile.hover=false"
|
|
ng-class="{'projected': mediafile.isProjected().length}"
|
|
ng-repeat="mediafile in mediafilesFiltered = (mediafiles
|
|
| hiddenFilter
|
|
| osFilter: filter.filterString : filter.getObjectQueryString
|
|
| filter: {filetype: (filter.booleanFilters.isPdf.value ? 'application/pdf' : (filter.booleanFilters.isPdf.value === false ? '!application/pdf' : ''))}
|
|
| filter: {hidden: filter.booleanFilters.isHidden.value}
|
|
| orderBy: sort.column : sort.reverse )">
|
|
|
|
<!-- select column -->
|
|
<div ng-show="isSelectMode" os-perms="mediafiles.can_manage" class="col-xs-1 centered">
|
|
<i class="fa text-danger pointer" ng-click="mediafile.selected=!mediafile.selected"
|
|
ng-class="mediafile.selected ? 'fa-check-square-o' : 'fa-square-o'"></i>
|
|
</div>
|
|
<!-- projector column -->
|
|
<div class="col-xs-1 centered projector" os-perms="core.can_manage_projector">
|
|
<div class="btn-group" style="min-width:{{ projectors.length > 1 ? '54' : '34' }}px;" uib-dropdown
|
|
ng-if="mediafile.is_presentable"
|
|
uib-tooltip="{{ 'Projector' | translate }} {{ mediafile.isProjected()[0] || '' }}"
|
|
tooltip-enable="mediafile.isProjected().length">
|
|
<button type="button" class="btn btn-default btn-sm"
|
|
ng-click="showMediafile(defaultProjectorId, mediafile)"
|
|
ng-class="{ 'btn-primary': inArray(mediafile.isProjected(), defaultProjectorId) }">
|
|
<i class="fa fa-video-camera"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-sm slimDropDown"
|
|
ng-class="{ 'btn-primary': (mediafile.isProjected().length && !inArray(mediafile.isProjected(), defaultProjectorId) ) }"
|
|
ng-if="projectors.length > 1"
|
|
uib-dropdown-toggle>
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" ng-if="projectors.length > 1">
|
|
<li role="menuitem" ng-repeat="projector in projectors | orderBy:'id'">
|
|
<a href="" ng-click="showMediafile(projector.id, mediafile)"
|
|
ng-class="{ 'projected': inArray(mediafile.isProjected(), projector.id) }">
|
|
<i class="fa fa-video-camera" ng-show="inArray(mediafile.isProjected(), projector.id) "></i>
|
|
{{ projector.name | translate }}
|
|
<span ng-if="defaultProjectorId == projector.id">(<translate>Default</translate>)</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="no-projector-spacer" os-perms="!core.can_manage_projector"></div>
|
|
<!-- main content column -->
|
|
<div class="col-xs-5 content">
|
|
<div class="spacer-right"> <!-- horizontal block -->
|
|
<i ng-style="{'visibility': mediafile.hidden ? 'visible' : 'hidden'}" class="fa fa-lock fa-lg"
|
|
title="{{ 'Is hidden' | translate }}"></i>
|
|
<i ng-style="{'visibility': mediafile.isUsedAsLogo() ? 'visible' : 'hidden'}" class="fa fa-picture-o fa-lg spacer-left"
|
|
title="{{ 'Is used as a logo' | translate }}" os-perms="core.can_manage_logos"></i>
|
|
</div>
|
|
<div>
|
|
<div> <!-- vertical block -->
|
|
<a ng-href="{{ mediafile.mediafileUrl }}" class="title" target="_blank">{{ mediafile.title_or_filename }}</a>
|
|
</div>
|
|
<div><small>{{ mediafile.uploader.get_full_name() }}</small></div>
|
|
<div os-perms="mediafiles.can_manage" ng-class="{'hiddenDiv': !mediafile.hover}">
|
|
<small>
|
|
<a href="" ng-click="openDialog(mediafile)" translate>Edit</a> ·
|
|
<a href="" class="text-danger"
|
|
ng-bootbox-confirm="{{ 'Are you sure you want to delete this file?' | translate }}<br>
|
|
<b>{{ mediafile.title }} [{{ mediafile.mediafile.name }}]</b>"
|
|
ng-bootbox-confirm-action="delete(mediafile)" translate>Delete</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- additional content column -->
|
|
<div class="col-xs-4 content" ng-style="{'width': isSelectMode ? 'calc(50% - 120px)' : 'calc(50% - 70px)'}">
|
|
<div style="width: 60%;" class="optional">
|
|
<small>
|
|
<div>
|
|
<i class="fa fa-file"></i> {{ mediafile.filetype }}
|
|
<span ng-if="mediafile.mediafile.encrypted">(<translate>Encrypted</translate>)</span>
|
|
</div>
|
|
<div><i class="fa fa-database"></i> {{ mediafile.filesize }}</div>
|
|
<div><i class="fa fa-upload"></i> {{ mediafile.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
|
|
</small>
|
|
</div>
|
|
<div style="width: 40%;" class="pull-right optional">
|
|
<!-- Logo placeholder dropdown for manage user -->
|
|
<div os-perms="core.can_manage_logos"
|
|
ng-mouseover="mediafile.logoHover=true"
|
|
ng-mouseleave="mediafile.logoHover=false"
|
|
ng-show="mediafile.canBeUsedAsLogo()">
|
|
<span uib-dropdown>
|
|
<span id="dropdownLogo{{ mediafile.id }}" class="pointer nobr" uib-dropdown-toggle>
|
|
<span uib-tooltip="{{ 'Manage logos' | translate }}" tooltip-class="nobr">
|
|
<span ng-if="!mediafile.isUsedAsLogo()" ng-show="mediafile.hover">
|
|
<i class="fa fa-picture-o"></i>
|
|
<i class="fa fa-plus"></i>
|
|
</span>
|
|
<span ng-if="mediafile.isUsedAsLogo()">
|
|
<span ng-repeat="logo in mediafile.getLogos()">
|
|
<i class="fa fa-picture-o spacer-right"
|
|
ng-style="{'visibility': $first ? 'visible' : 'hidden'}"></i>
|
|
<small>
|
|
{{ logo.display_name | translate }}<span ng-if="!$last">,</br></span>
|
|
</small>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
<span ng-if="hasProjectorHeaderLogo(mediafile) && mediafile.logoHover"
|
|
uib-tooltip="{{ 'The projector header should have a default size of 1024x70px. Adapt the image width if you change the projector resolution.' | translate }}">
|
|
<i class="fa fa-info-circle"></i>
|
|
</span>
|
|
<i class="fa fa-cog fa-lg spacer-left" ng-show="mediafile.logoHover && mediafile.isUsedAsLogo()"></i>
|
|
</span>
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownLogos{{ mediafile.id }}">
|
|
<li ng-repeat="logo in logos">
|
|
<a href ng-click="toggleLogo(mediafile, logo)">
|
|
<i class="fa fa-check" ng-if="hasLogo(mediafile, logo)"></i>
|
|
{{ logo.display_name | translate }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- end data row -->
|
|
</div><!-- end os-table -->
|
|
</div>
|