From a52e7f8ba9651aaf9799436d66db525dfdd55a43 Mon Sep 17 00:00:00 2001 From: Taka Date: Thu, 21 Jul 2022 08:32:34 +1000 Subject: [PATCH] Added a splitter to the "edit vehicle/ordnance" dialog. --- .../webapp/static/css/edit-vo-dialog.css | 14 +++++--- vasl_templates/webapp/static/vo2.js | 33 ++++++++++++++++++- .../webapp/templates/edit-vo-dialog.html | 10 ++++-- 3 files changed, 49 insertions(+), 8 deletions(-) diff --git a/vasl_templates/webapp/static/css/edit-vo-dialog.css b/vasl_templates/webapp/static/css/edit-vo-dialog.css index 9828794..8e8379b 100644 --- a/vasl_templates/webapp/static/css/edit-vo-dialog.css +++ b/vasl_templates/webapp/static/css/edit-vo-dialog.css @@ -8,12 +8,12 @@ .ui-dialog.edit-vo .header .content .vo-name { margin-left: 0.5em ; font-size: 125% ; font-weight: bold ; color: #333 ; } .ui-dialog.edit-vo .header .content input.select-vo-image { width: 15px ; position: relative ; top: 10px ; } -.ui-dialog.edit-vo .capabilities { margin-top: 0.25em ; flex-grow: 1 ; } -.ui-dialog.edit-vo .comments { margin-top: 0.5em ; flex-grow: 1 ; } -/* FUDGE! Need this for Chromium (odd, because flex-grow works properly elsewhere :-/). */ -.ui-dialog.edit-vo .capabilities, .ui-dialog.edit-vo .comments { flex-basis: 0 ; } +.ui-dialog.edit-vo .split-container { flex-grow: 1 ; margin-bottom: 15px ; } -.ui-dialog.edit-vo .fieldset { height: calc(100% - 40px) ; display: flex ; flex-direction: column ; align-items: stretch ; } +.ui-dialog.edit-vo .capabilities { margin-top: 0.25em ; display: flex ; flex-direction: column ; } +.ui-dialog.edit-vo .comments { margin-top: 0.5em ; display: flex ; flex-direction: column ; } + +.ui-dialog.edit-vo .fieldset { flex-grow: 1 ; display: flex ; flex-direction: column ; align-items: stretch ; } .ui-dialog.edit-vo .fieldset { margin: 0 ; padding: 5px 8px 8px 8px ; border: 1px solid #aaa ; } .ui-dialog.edit-vo .fieldset-legend { color: #333 ; font-weight: bold ; } .ui-dialog.edit-vo .fieldset ul { flex-grow: 1 ; margin: 0 0 5px 0 ; list-style-type: none ; overflow-y: auto ; } @@ -24,3 +24,7 @@ .ui-dialog.edit-vo .fieldset .footer { margin-top: 0.25em ; display: flex ; align-items: center ; } .ui-dialog.edit-vo .fieldset .footer img.trash { margin: 3px 5px ; height: 24px ; } + +/* splitter */ +#edit-vo .gutter { position: relative ; margin: 12px 8em -12px 8em ; min-height: 3px ; background-color: #eee ; cursor: row-resize ; } +#edit-vo .gutter img { position: absolute ; left: 40% ; top: -2px ; } diff --git a/vasl_templates/webapp/static/vo2.js b/vasl_templates/webapp/static/vo2.js index bb39746..d55f9e1 100644 --- a/vasl_templates/webapp/static/vo2.js +++ b/vasl_templates/webapp/static/vo2.js @@ -1,3 +1,7 @@ +var gEditVoDialogSplitter = null ; +var gPrevEditVoDialogEntry = null ; + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function edit_ob_vehicle( $entry, player_no ) { _do_edit_ob_vo( $entry, player_no, "vehicle" ) ; } function edit_ob_ordnance( $entry, player_no ) { _do_edit_ob_vo( $entry, player_no, "ordnance" ) ; } @@ -138,7 +142,7 @@ function _do_edit_ob_vo( $entry, player_no, vo_type ) var $dlg = $( "#edit-vo" ).dialog( { dialogClass: "edit-vo", title: "Edit "+vo_type, - minWidth: 550, + minWidth: 500, minHeight: 500, modal: true, create: function() { @@ -172,6 +176,33 @@ function _do_edit_ob_vo( $entry, player_no, vo_type ) load_entries( $capabilities, capabilities ) ; $elite.prop( "checked", elite ? true : false ) ; load_entries( $comments, comments ) ; + // initialize the spliiter + // FUDGE! We should be able to do this in the dialog's "create" handler, but it doesn't + // really work (setting the minSize doesn't work). Thing is, doing it here (once) also + // doesn't work, but in a way that's more acceptable :-/ + if ( gEditVoDialogSplitter === null ) { + gEditVoDialogSplitter = Split( [ "#edit-vo .capabilities", "#edit-vo .comments" ], { + "direction": "vertical", + gutterSize: 3 + } ) ; + var $gripper = $( "" ) ; + $( "#edit-vo .gutter.gutter-vertical" ).append( $gripper ) ; + // FUDGE! Work-around a weird layout problem with the splitter, where things don't work + // until the dialog is resized, and then it's OK thereafter :-/ The height will be corrected + // when the UI updates and the layout is re-calculated. + $( ".split-container" ).css( { height: "1px" } ) ; + } + if ( $entry !== gPrevEditVoDialogEntry ) { + var nEntriesAvail = ( $capabilities.height() + $comments.height() ) / 27 ; + var nEntriesTotal = capabilities.length + comments.length ; + if ( nEntriesTotal === 0 || (capabilities.length <= nEntriesAvail/2 && comments.length <= nEntriesAvail/2) ) + gEditVoDialogSplitter.setSizes( [ 50, 50 ] ) ; + else { + var ratio = Math.floor( 100 * capabilities.length / nEntriesTotal ) ; + gEditVoDialogSplitter.setSizes( [ ratio, 100-ratio ] ) ; + } + gPrevEditVoDialogEntry = $entry ; + } }, buttons: { OK: function() { diff --git a/vasl_templates/webapp/templates/edit-vo-dialog.html b/vasl_templates/webapp/templates/edit-vo-dialog.html index 05f1def..4fb8c02 100644 --- a/vasl_templates/webapp/templates/edit-vo-dialog.html +++ b/vasl_templates/webapp/templates/edit-vo-dialog.html @@ -2,9 +2,13 @@
+
+
-
 Elite
-
Capabilities:
+
+
 Elite
+
Capabilities:
+
    @@ -30,3 +34,5 @@
    + +