Skip to content

Commit

Permalink
Print visibility toggling
Browse files Browse the repository at this point in the history
  • Loading branch information
@V13Axel
V13Axel committed Nov 18, 2023
1 parent 56983bd commit 8de80a6
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 36 deletions.
63 changes: 33 additions & 30 deletions resources/js/events-manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const events_manager = {
});
},

hideSelected($dispatch) {
affectSelected($dispatch, callback) {
Object.entries(this.selected)
.filter((entry) => entry[1])
.forEach((event) => {
Expand All @@ -37,29 +37,36 @@ const events_manager = {
canonicalEvent.id.toString() === event[0],
);

canonicalEvent.settings.hide = true;
callback(canonicalEvent);
});

this.selected = {};

$dispatch("events-changed");
},

unhideSelected($dispatch) {
Object.entries(this.selected)
.filter((entry) => entry[1])
.forEach((event) => {
let canonicalEvent = window.events.find(
(canonicalEvent) =>
canonicalEvent.id.toString() === event[0],
);
hideSelected($dispatch) {
this.affectSelected($dispatch, (canonicalEvent) => {
canonicalEvent.settings.hide = true;
});
},

canonicalEvent.settings.hide = false;
});
unhideSelected($dispatch) {
this.affectSelected($dispatch, (canonicalEvent) => {
canonicalEvent.settings.hide = false;
});
},

this.selected = {};
printSelected($dispatch) {
this.affectSelected($dispatch, (canonicalEvent) => {
canonicalEvent.settings.print = true;
});
},

$dispatch("events-changed");
dontPrintSelected($dispatch) {
this.affectSelected($dispatch, (canonicalEvent) => {
canonicalEvent.settings.print = false;
});
},

eventVisibilityTooltip(event) {
Expand All @@ -74,30 +81,24 @@ const events_manager = {
return "This event is visible to anyone who can see the calendar.";
},

toggleEventHidden(event, $dispatch) {
toggleEventPrint(event, $dispatch) {
let canonicalEvent = window.events.find(
(canonicalEvent) => canonicalEvent.id === event.id,
);

canonicalEvent.settings.hide = !canonicalEvent.settings.hide;
canonicalEvent.settings.print = !canonicalEvent.settings.print;

$dispatch("events-changed");
},

// Cycle through visibility options:
// any -> visible -> hidden -> any
cycleVisibility() {
switch (this.visibility) {
case "any":
this.visibility = "visible";
break;
case "visible":
this.visibility = "hidden";
break;
case "hidden":
this.visibility = "any";
break;
}
toggleEventHidden(event, $dispatch) {
let canonicalEvent = window.events.find(
(canonicalEvent) => canonicalEvent.id === event.id,
);

canonicalEvent.settings.hide = !canonicalEvent.settings.hide;

$dispatch("events-changed");
},

get numberSelected() {
Expand Down Expand Up @@ -204,6 +205,8 @@ const events_manager = {
return !(event.settings.hide || event.settings.hide_full);
case "hidden":
return event.settings.hide || event.settings.hide_full;
case "entirely_hidden":
return event.settings.hide_full;
}
},

Expand Down
1 change: 1 addition & 0 deletions resources/sass/calendar/inputs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -721,6 +721,7 @@ input[type="number"]:not(.spinner)::-webkit-outer-spin-button {
text-align: center;
display: grid;
align-items: center;
position: relative;

&:hover {
background-color: rgba($modal-accent-background, 0.7);
Expand Down
17 changes: 17 additions & 0 deletions resources/sass/calendar/utility.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,3 +140,20 @@ mark {
.grid {
display: grid;
}

i.fa.slashed {
position: relative;
display: inline-block;
margin-right: 0.2em;
}

i.fa.slashed:after {
content: "";
position: absolute;
width: 160%;
height: 0;
border-top: 2px solid color-mix(in srgb, currentcolor 80%, transparent);
top: 50%;
left: -30%;
transform: rotate(35deg);
}
26 changes: 20 additions & 6 deletions resources/views/layouts/manage_events.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,9 @@ class="layout_background clickable_background hidden"
<div class="col-12 col-sm-3 pl-sm-1 mb-1 mb-md-0 mt-sm-2 mt-lg-0 d-none d-sm-flex" :class="{ 'd-none': !showFilters }">
<select x-model="visibility" class="form-control">
<option value="any">Any visibility</option>
<option value="visible">Visible only</option>
<option value="hidden">Hidden only</option>
<option value="visible">Visible</option>
<option value="hidden">Hidden</option>
<option value="entirely_hidden">Entirely Hidden</option>
</select>
</div>
</div>
Expand All @@ -75,12 +76,22 @@ class="layout_background clickable_background hidden"

<div class="border-right ml-2 mr-1"></div>

<button class="btn btn-primary flex-shrink-0 ml-1" @click="printSelected($dispatch)" :disabled="!Object.keys(selected).length">
<i class="fa fa-print"></i> <span class="d-none d-lg-inline">Print</span>
</button>

<button class="btn btn-primary flex-shrink-0 ml-1" @click="dontPrintSelected($dispatch)" :disabled="!Object.keys(selected).length">
<span class="position-relative"><i class="fa fa-print slashed"></i></span> <span class="d-none d-lg-inline">Don't Print</span>
</button>

<div class="border-right ml-2 mr-1"></div>

<button class="btn btn-primary flex-shrink-0 ml-1" @click="unhideSelected($dispatch)" :disabled="!Object.keys(selected).length">
<i class="fa fa-eye"></i> <span class="d-none d-md-inline">Unhide</span>
<i class="fa fa-eye"></i> <span class="d-none d-lg-inline">Unhide</span>
</button>

<button class="btn btn-primary flex-shrink-0 ml-1" @click="hideSelected($dispatch)" :disabled="!Object.keys(selected).length">
<i class="fa fa-eye-slash"></i> <span class="d-none d-md-inline">Hide</span>
<i class="fa fa-eye-slash"></i> <span class="d-none d-lg-inline">Hide</span>
</button>
</div>

Expand Down Expand Up @@ -200,8 +211,11 @@ class="layout_background clickable_background hidden"
<span class="px-2 d-none d-sm-inline" style="opacity: 0.4;">&bull;</span>
<span class="d-none d-sm-inline" :class="{'opacity-70': event_data.description, 'opacity-30': !event_data.description }" x-html="event_data.description ? highlight_match(event_data.description) : 'Event has no description'"></span>
</div>
<button class="managed_event_action_icon" :style="multiselect ? 'pointer-events: none;' : ''" @click.stop="toggleEventHidden(event_data, $dispatch)">
<i class="fa" :title="eventVisibilityTooltip(event_data)" :class="{ 'fa-eye-slash': event_data.settings.hide || event_data.settings.hide_full, 'fa-eye': !event_data.settings.hide, 'opacity-50' : event_data.settings.hide_full }"></i>
<button class="managed_event_action_icon" :style="multiselect ? 'pointer-events: none;' : ''" @click.stop="toggleEventPrint(event_data, $dispatch)">
<i class="fa fa-print" :class="{ 'slashed': !event_data.settings.print }"></i>
</button>
<button class="managed_event_action_icon" :style="(multiselect || event_data.settings.hide_full) ? 'pointer-events: none;' : ''" @click.stop="toggleEventHidden(event_data, $dispatch)">
<i class="fa" :title="eventVisibilityTooltip(event_data)" :class="{ 'fa-eye-slash': event_data.settings.hide || event_data.settings.hide_full, 'fa-eye': !event_data.settings.hide, 'opacity-50 pointer-events-none' : event_data.settings.hide_full }"></i>
</button>
<button class="managed_event_action_icon" x-show="!multiselect" @click.stop="$dispatch('event-editor-modal-edit-event', { event_db_id: event_data.id, epoch: window.dynamic_data.epoch })">
<i class="fa fa-edit"></i>
Expand Down

0 comments on commit 8de80a6

Please sign in to comment.