Added a splitter to the "edit vehicle/ordnance" dialog.

master
Pacman Ghost 2 years ago
parent fa5a99e87c
commit a52e7f8ba9
  1. 14
      vasl_templates/webapp/static/css/edit-vo-dialog.css
  2. 33
      vasl_templates/webapp/static/vo2.js
  3. 10
      vasl_templates/webapp/templates/edit-vo-dialog.html

@ -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 ; }

@ -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 = $( "<img src='" + gImagesBaseUrl + "/gripper-horz.png'>" ) ;
$( "#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() {

@ -2,9 +2,13 @@
<div class="header"></div>
<div class="split-container">
<div class="capabilities">
<div style="float:right;"> <input type="checkbox" class="elite">&nbsp;Elite </input> </div>
<div class="fieldset-legend"> Capabilities: </div>
<div>
<div style="float:right;"> <input type="checkbox" class="elite">&nbsp;Elite </input> </div>
<div class="fieldset-legend"> Capabilities: </div>
</div>
<div class="fieldset">
<ul id="vo_capabilities-sortable" class="sortable"></ul>
<div class="footer">
@ -30,3 +34,5 @@
</div>
</div>
</div>

Loading…
Cancel
Save