Add arrows to control channel programming height.

work-around for #182
This commit is contained in:
vexorian 2020-11-21 00:11:41 -04:00
parent ad87a746bd
commit 8a9043067b
3 changed files with 66 additions and 3 deletions

View File

@ -17,6 +17,24 @@ module.exports = function ($timeout, $location, dizquetv, resolutionOptions) {
scope.maxSize = 50000;
scope.programming = {
maxHeight: 30,
step : 1,
}
try {
let h = parseFloat( localStorage.getItem("channel-programming-list-height" ) );
if (isNaN(h)) {
h = 30;
}
h = Math.min(64, Math.max(1, h));
console.log("loaded=" + h);
scope.programming.maxHeight = h;
} catch (e) {
console.error(e);
}
scope.blockCount = 1;
scope.showShuffleOptions = (localStorage.getItem("channel-tools") === "on");
scope.reverseTools = (localStorage.getItem("channel-tools-position") === "left");
@ -1540,6 +1558,28 @@ module.exports = function ($timeout, $location, dizquetv, resolutionOptions) {
return options;
}
scope.programmingHeight = () => {
return scope.programming.maxHeight + "rem";
}
let setProgrammingHeight = (h) => {
scope.programming.step++;
$timeout( () => {
scope.programming.step--;
}, 1000 )
scope.programming.maxHeight = h;
localStorage.setItem("channel-programming-list-height", "" + h );
};
scope.programmingZoomIn = () => {
let h = scope.programming.maxHeight;
h = Math.min( Math.ceil(h + scope.programming.step ), 64);
setProgrammingHeight(h);
}
scope.programmingZoomOut = () => {
let h = scope.programming.maxHeight;
h = Math.max( Math.floor(h - scope.programming.step ), 2 );
setProgrammingHeight(h);
}
scope.refreshFillerStuff = () => {
if (typeof(scope.channel.fillerCollections) === 'undefined') {
return;

View File

@ -288,7 +288,6 @@ div.programming-panes div.reverse {
flex-direction: row-reverse;
}
div.programming-panes div.programming-pane {
max-height: 30rem;
overflow-y: auto;
padding-top: 0;
padding-bottom: 0;

View File

@ -87,6 +87,25 @@
</label>
</div>
<div ng-style="{order: (reverseTools?1:4) }" >
<button class="btn btn-sm btn-outline-info btn-programming-tools"
ng-click="programmingZoomIn()"
title="Higher"
>
<span class="fa fa-arrow-circle-down"></span>
</button>
</div>
<div ng-style="{order: (reverseTools?1:4) }" >
<button class="btn btn-sm btn-outline-info btn-programming-tools"
ng-click="programmingZoomOut()"
title="Shorter"
>
<span class="fa fa-arrow-circle-up"></span>
</button>
</div>
<div ng-show='showShuffleOptions' ng-style="{order: (reverseTools?1:4) }" >
<button class="btn btn-sm btn-outline-info btn-programming-tools"
ng-click="toggleToolsDirection()"
@ -117,13 +136,16 @@
</div>
</div>
<div class="modal-body programming-panes" ng-show="tab == 'programming'">
<div class="modal-body programming-panes" ng-show="tab == 'programming'"
ng-style="{'max-height':programmingHeight()}"
>
<div class='row' ng-class="{'reverse': reverseTools }" >
<div vs-repeat="options" ng-class="{'programming-pane': true, 'col':true, 'd-block': showShuffleOptions, 'd-sm-none': showShuffleOptions, 'd-md-block' : showShuffleOptions, container: true, 'list-group': true, 'list-group-root': true, 'programming-programs': true}" ng-show="hasPrograms()"
dnd-drop="dropFunction(index , item)"
dnd-list=""
ng-init="setUpWatcher()"
ng-if="true"
ng-style="{'max-height':programmingHeight()}"
>
<div ng-repeat="x in channel.programs track by x.$index"
ng-click="selectProgram(x.$index)"
@ -151,7 +173,9 @@
<small class='text-info'>There are no programs in the channel, use the <i class='fas fa-plus'></i> button to add programs from your media library or use the Tools to add Flex time or a Channel Redirect</small>
</div>
<div class='col-md-4 col-sm-12 col-xl-6 col-lg-5 programming-pane tools-pane' ng-show="showShuffleOptions">
<div class='col-md-4 col-sm-12 col-xl-6 col-lg-5 programming-pane tools-pane' ng-show="showShuffleOptions"
ng-style="{'max-height':programmingHeight()}"
>
<div class="row">
<div class="col-xl-6 col-md-12" style="padding: 5px;" ng-show="hasPrograms()">