Skip to content

Allow menu in full screen mode #563

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Neriderc merged 5 commits into from
May 19, 2025
Merged

Allow menu in full screen mode #563

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
27205d2
Add menu button to fullscreen
Neriderc May 17, 2025
2dd9f4b
Move menu to view + in render node
Neriderc May 17, 2025
5986493
Conditionally hide full screen menu button
Neriderc May 17, 2025
3f74d43
Change menu icon and move to left
Neriderc May 18, 2025
d66e726
Remove code quality workflow
Neriderc May 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 0 additions & 29 deletions .github/workflows/code_quality.yml
View file
Open in desktop

This file was deleted.

9 changes: 9 additions & 0 deletions resources/css/gvexport.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,11 @@ span.NAME {
right: 10px;
text-align: center;
}
#render_menu_container {
position: absolute;
top: 0;
left: 10px;
}

.fullscreen {
font-size: 2.8em;
Expand All @@ -322,6 +327,10 @@ span.NAME {
.search_icon {
font-size: 1.8em;
}

.menu-fullscreen {
font-size: 1.8em;
}
@media screen and (max-device-width:480px) {
.fullscreen {
font-size: 2em;
Expand Down
11 changes: 11 additions & 0 deletions resources/javascript/MainPage/UI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1034,5 +1034,16 @@ const UI = {
this.classList.remove('over');
return false;
}
},

mainOptions: {
showOptionsFullscreen() {
let menu = document.getElementsByClassName('sidebar').item(0);
if (menu.hidden) {
UI.showSidebar();
} else {
UI.hideSidebar();
}
}
}
};
2 changes: 2 additions & 0 deletions resources/javascript/gvexport.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,9 +222,11 @@ function handleFullscreenExit()
{
Form.showHide(document.getElementById("fullscreenButton"), true);
Form.showHide(document.getElementById("fullscreenClose"), false);
Form.showHide(document.getElementById("fullscreenShowMenu"), false);
} else {
Form.showHide(document.getElementById("fullscreenButton"), false);
Form.showHide(document.getElementById("fullscreenClose"), true);
Form.showHide(document.getElementById("fullscreenShowMenu"), true);
}
}

Expand Down
111 changes: 111 additions & 0 deletions resources/views/MainPage/Sidebar.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<?php

use vendor\WebtreesModules\gvexport\GVExport;
use vendor\WebtreesModules\gvexport\MainPage;
use Fisharebest\Webtrees\I18N;

/**
* @var Tree $tree the webtrees tree instance of the current tree
* @var Individual $individual the webtrees individual object instance of the XREF in the URL
* @var array $settings wider array of settings and options
* @var array $vars array of saved settings
* @var array $otypes output file type options
* @var bool $cartempty are there any individuals (INDI records) in the clippings cart?
* @var GVExport $module instance of this module
* @var bool $admin whether this is for the admin page (remove functions that aren't settings)
* @var bool $usegraphviz whether graphviz is enabled or available
*/

?>
<form action="<?= $module->chartUrl($individual) ?>" method="post" class="sidebar d-print-none" id="gvexport">
<div class="pull-right btn-hover">
<a class="hide-form btn btn-secondary pointer"><i class="fa-solid fa-xmark"></i></a>
</div>

<div class="sidebar__formfields col">

<?= csrf_field() ?>

<input type="hidden" id="time_token" name="vars[time_token]" value="">
<div id="saved_diagrams_panel" <?php if (!$vars["show_diagram_panel"]) echo 'style="display: none"'; ?>>
<div class="d-flex">
<h3><?= I18N::translate('Saved diagrams') ?></h3>
</div>

<div class="row no-right-margin form-group">
<?= MainPage::addLabel('simple_settings_list', 'List of diagrams'); ?>
<div class="col-sm-8 options-panel-background">
<select id="simple_settings_list" class="form-select">
<option value="-">-</option>
</select>
</div>
</div>
</div>
<div class="d-flex">
<h3><?= I18N::translate('People to be included') ?></h3>
</div>

<?php
// Include the "People to be included" section of the settings
echo view($module->name() . '::MainPage/PeopleToInclude',
[
'vars' => $vars,
'tree' => $tree,
'cartempty' => $cartempty,
'module' => $module,
'settings' => $settings,
'admin' => false
]); ?>

<h3><?= I18N::translate('Appearance') ?></h3>

<?php
// Include the "Appearance" section of the settings
echo view($module->name() . '::MainPage/Appearance',
[
'vars' => $vars,
'tree' => $tree,
'module' => $module,
'settings' => $settings,
'usegraphviz' => $usegraphviz,
'individual' => $individual,
'admin' => false
]); ?>

<h3><?= I18N::translate('General settings') ?></h3>
<?php
// Include the "General Settings" section of the settings
echo view($module->name() . '::MainPage/GeneralSettings',
[
'vars' => $vars,
'module' => $module,
'settings' => $settings,
'usegraphviz' => $usegraphviz,
'otypes' => $otypes,
'admin' => false
]); ?>
<?php if ($vars["show_debug_panel"]) { ?>
<h3><?= I18N::translate('Debug') ?></h3>
<?php
// Include the "General Settings" section of the settings
echo view($module->name() . '::MainPage/DebugPanel',
[
'vars' => $vars,
'admin' => false
]); ?>
<?php } ?>
</div>

<div class="sidebar__buttons">
<button type="submit" class="btn btn-primary update-browser-rendering" id="update-browser" <?php if ($vars["auto_update"]) { echo 'style="display: none"'; } ?>><?= I18N::translate('Update') ?></button>
<button type="submit" class="btn btn-secondary main-action" name="download"><?= I18N::translate('Download') ?></button>
<a href="<?= $module->chartUrl($individual, ['reset' => '1']) ?>" class="btn btn-outline-secondary"><?= I18N::translate('Reset') ?></a>
<button id="help-about" class="btn btn-outline-secondary" name="help"><?= I18N::translate('Help') ?></button>
</div>

<input type="hidden" id="browser" name="browser" value="false">
<input type="hidden" id="people-advanced-hidden" name="vars[show_adv_people]" value="<?= $vars["show_adv_people"] ? 'show' : '' ?>">
<input type="hidden" id="appearance-advanced-hidden" name="vars[show_adv_appear]" value="<?= $vars["show_adv_appear"] ? 'show' : '' ?>">
<input type="hidden" id="files-advanced-hidden" name="vars[show_adv_files]" value="<?= $vars["show_adv_files"] ? 'show' : '' ?>">
<div id="toast-container"></div>
</form>
102 changes: 14 additions & 88 deletions resources/views/page.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,107 +43,30 @@ $usegraphviz = $vars['graphviz_bin'] != "";
<?= $title ?>
</h2>

<form action="<?= $module->chartUrl($individual) ?>" method="post" class="sidebar d-print-none" id="gvexport">
<div class="pull-right btn-hover">
<a class="hide-form btn btn-secondary pointer"><i class="fa-solid fa-xmark"></i></a>
</div>

<div class="sidebar__formfields col">

<?= csrf_field() ?>

<input type="hidden" id="time_token" name="vars[time_token]" value="">
<div id="saved_diagrams_panel" <?php if (!$vars["show_diagram_panel"]) echo 'style="display: none"'; ?>>
<div class="d-flex">
<h3><?= I18N::translate('Saved diagrams') ?></h3>
</div>
<div class="sidebar_toggle" hidden>
<a class="btn btn-outline-secondary pointer"><?= I18N::translate('Show options') ?></a>
</div>

<div class="row no-right-margin form-group">
<?= MainPage::addLabel('simple_settings_list', 'List of diagrams'); ?>
<div class="col-sm-8 options-panel-background">
<select id="simple_settings_list" class="form-select">
<option value="-">-</option>
</select>
</div>
</div>
</div>
<div class="d-flex">
<h3><?= I18N::translate('People to be included') ?></h3>
</div>
<?= view($module->name() . '::MainPage/Help', []); ?>

<div id="render-container">
<div id="rendering" hidden style="background-color: <?= $vars["background_col"] ?>;"></div>
<div id="render_menu_container">
<?php
// Include the "People to be included" section of the settings
echo view($module->name() . '::MainPage/PeopleToInclude',
// Include the options sidebar menu
echo view($module->name() . '::MainPage/Sidebar',
[
'vars' => $vars,
'tree' => $tree,
'cartempty' => $cartempty,
'module' => $module,
'settings' => $settings,
'admin' => false
]); ?>

<h3><?= I18N::translate('Appearance') ?></h3>

<?php
// Include the "Appearance" section of the settings
echo view($module->name() . '::MainPage/Appearance',
[
'vars' => $vars,
'tree' => $tree,
'module' => $module,
'settings' => $settings,
'usegraphviz' => $usegraphviz,
'admin' => false,
'individual' => $individual,
'admin' => false
]); ?>

<h3><?= I18N::translate('General settings') ?></h3>
<?php
// Include the "General Settings" section of the settings
echo view($module->name() . '::MainPage/GeneralSettings',
[
'vars' => $vars,
'module' => $module,
'settings' => $settings,
'usegraphviz' => $usegraphviz,
'otypes' => $otypes,
'admin' => false
'usegraphviz' => $usegraphviz,
]); ?>
<?php if ($vars["show_debug_panel"]) { ?>
<h3><?= I18N::translate('Debug') ?></h3>
<?php
// Include the "General Settings" section of the settings
echo view($module->name() . '::MainPage/DebugPanel',
[
'vars' => $vars,
'admin' => false
]); ?>
<?php } ?>
</div>

<div class="sidebar__buttons">
<button type="submit" class="btn btn-primary update-browser-rendering" id="update-browser" <?php if ($vars["auto_update"]) { echo 'style="display: none"'; } ?>><?= I18N::translate('Update') ?></button>
<button type="submit" class="btn btn-secondary main-action" name="download"><?= I18N::translate('Download') ?></button>
<a href="<?= $module->chartUrl($individual, ['reset' => '1']) ?>" class="btn btn-outline-secondary"><?= I18N::translate('Reset') ?></a>
<button id="help-about" class="btn btn-outline-secondary" name="help"><?= I18N::translate('Help') ?></button>
</div>

<input type="hidden" id="browser" name="browser" value="false">
<input type="hidden" id="people-advanced-hidden" name="vars[show_adv_people]" value="<?= $vars["show_adv_people"] ? 'show' : '' ?>">
<input type="hidden" id="appearance-advanced-hidden" name="vars[show_adv_appear]" value="<?= $vars["show_adv_appear"] ? 'show' : '' ?>">
<input type="hidden" id="files-advanced-hidden" name="vars[show_adv_files]" value="<?= $vars["show_adv_files"] ? 'show' : '' ?>">
<div id="toast-container"></div>
</form>

<div class="sidebar_toggle" hidden>
<a class="btn btn-outline-secondary pointer"><?= I18N::translate('Show options') ?></a>
</div>

<?= view($module->name() . '::MainPage/Help', []); ?>

<div id="render-container">
<div id="rendering" hidden style="background-color: <?= $vars["background_col"] ?>;"></div>
<div id="render_button_container">
<div>
<a title="<?= I18N::translate('Fullscreen') ?>" onclick="toggleFullscreen()" class="fullscreen pointer" id="fullscreenButton">⛶</a>
Expand All @@ -153,6 +76,9 @@ $usegraphviz = $vars['graphviz_bin'] != "";
<a title="<?= I18N::translate('Search diagram') ?>" onclick="" class="search_icon pointer" id="searchButton"><?= view('icons/search'); ?></a>
<div id="diagram_search_box_container" style="display: none"><?= view('components/select-individual', ['name' => 'diagram_search_box', 'id' => 'diagram_search_box', 'tree' => $tree, 'individual' => "", 'required'=>false]); ?></div>
</div>
<div>
<a title="<?= I18N::translate('Show menu') ?>" onclick="UI.mainOptions.showOptionsFullscreen()" class="menu-fullscreen pointer" id="fullscreenShowMenu" style="display: none;"><i class="fa-solid fa-wrench"></i></a>
</div>
</div>
<div id="context_menu" style="display: none">
<span id="menu-info">
Expand Down