From 13a1b511e619d28a6ffbda4800a895e1cc4c05c6 Mon Sep 17 00:00:00 2001 From: Taka Date: Fri, 22 Jul 2022 07:27:58 +1000 Subject: [PATCH] Added splitters to make some UI elements resizable. --- vasl_templates/main_window.py | 2 +- .../webapp/static/css/edit-vo-dialog.css | 4 - vasl_templates/webapp/static/css/lfa.css | 2 - vasl_templates/webapp/static/css/main.css | 8 +- .../static/css/scenario-search-dialog.css | 4 - vasl_templates/webapp/static/css/sortable.css | 2 +- .../webapp/static/css/tabs-extras.css | 5 +- vasl_templates/webapp/static/css/tabs-ob.css | 4 +- .../webapp/static/css/tabs-scenario.css | 1 + vasl_templates/webapp/static/css/tabs.css | 18 ++-- vasl_templates/webapp/static/extras.js | 13 +-- .../webapp/static/images/gripper-horz.png | Bin 139 -> 0 bytes .../webapp/static/images/gripper-vert.png | Bin 355 -> 0 bytes .../static/images/hsplitter-gripper.png | Bin 0 -> 355 bytes .../static/images/vsplitter-gripper.png | Bin 0 -> 358 bytes vasl_templates/webapp/static/lfa.js | 7 +- vasl_templates/webapp/static/main.js | 101 +++++++++++++++++- vasl_templates/webapp/static/scenarios.js | 7 +- vasl_templates/webapp/static/snippets.js | 2 + vasl_templates/webapp/static/sortable.js | 4 +- vasl_templates/webapp/static/utils.js | 21 ++++ vasl_templates/webapp/static/vo2.js | 7 +- vasl_templates/webapp/templates/tabs-ob1.html | 24 ++--- .../webapp/templates/tabs-scenario.html | 17 +-- 24 files changed, 183 insertions(+), 70 deletions(-) delete mode 100644 vasl_templates/webapp/static/images/gripper-horz.png delete mode 100644 vasl_templates/webapp/static/images/gripper-vert.png create mode 100644 vasl_templates/webapp/static/images/hsplitter-gripper.png create mode 100644 vasl_templates/webapp/static/images/vsplitter-gripper.png diff --git a/vasl_templates/main_window.py b/vasl_templates/main_window.py index 8edafbe..f06ccbd 100644 --- a/vasl_templates/main_window.py +++ b/vasl_templates/main_window.py @@ -94,7 +94,7 @@ class MainWindow( QWidget ): self.restoreGeometry( val ) else : self.resize( 1000, 650 ) - self.setMinimumSize( 980, 630 ) + self.setMinimumSize( 1015, 630 ) # initialize the layout layout = QVBoxLayout( self ) diff --git a/vasl_templates/webapp/static/css/edit-vo-dialog.css b/vasl_templates/webapp/static/css/edit-vo-dialog.css index c253e5d..09c4774 100644 --- a/vasl_templates/webapp/static/css/edit-vo-dialog.css +++ b/vasl_templates/webapp/static/css/edit-vo-dialog.css @@ -24,7 +24,3 @@ .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/css/lfa.css b/vasl_templates/webapp/static/css/lfa.css index 4abb710..8eed08b 100644 --- a/vasl_templates/webapp/static/css/lfa.css +++ b/vasl_templates/webapp/static/css/lfa.css @@ -23,8 +23,6 @@ #lfa .split.top-pane { display: flex ; min-height: 350px ; } #lfa .split.top-pane .right { position: relative ; } #lfa .split.bottom-pane { min-height: 200px ; position: relative ; } -#lfa .gutter { position: relative ; min-height: 3px ; background-color: #f0f0f0 ; cursor: row-resize ; z-index: 49 ; } -#lfa .gutter img { position: absolute ; left: 40% ; top: -2px ; } /* top pane: dr/DR distribution & pie charts */ #lfa .distrib { position: relative ; } diff --git a/vasl_templates/webapp/static/css/main.css b/vasl_templates/webapp/static/css/main.css index 72196cd..0720c25 100644 --- a/vasl_templates/webapp/static/css/main.css +++ b/vasl_templates/webapp/static/css/main.css @@ -37,7 +37,7 @@ label { height: 1.25em ; } .snippet-control .ui-selectmenu-button-closed { height: 26px ; } .snippet-control .ui-selectmenu-icon.ui-icon { margin-top: -8px ; } -button.edit-template { height: 28px ; padding: 4px 10px ; } +button.edit-template { height: 28px ; padding: 4px 10px ; margin-right: 0 ; } button.edit-template img { height: 18px ; vertical-align: middle ; margin: -2px 0.4em 0 0 ; } input.snippet-width { width: 3.75em ; } @@ -63,6 +63,12 @@ input.snippet-width { width: 3.75em ; } .growl .pre { font-family: monospace ; } .growl div.pre { margin: 0 0 1em 1em ; font-size: 80% ; } +.gutter { position: relative ; background-color: #ddd ; } +.gutter-vertical { cursor: row-resize ; } +.gutter-horizontal { cursor: col-resize ; } +img.vsplitter-gripper { position: absolute ; left: calc(50% - 15px) ; } +img.hsplitter-gripper { position: absolute ; top: calc(50% - 15px) ; } + /* -------------------------------------------------------------------- */ .small { font-size: 80% ; } diff --git a/vasl_templates/webapp/static/css/scenario-search-dialog.css b/vasl_templates/webapp/static/css/scenario-search-dialog.css index ba9ff13..b0cbaa2 100644 --- a/vasl_templates/webapp/static/css/scenario-search-dialog.css +++ b/vasl_templates/webapp/static/css/scenario-search-dialog.css @@ -6,10 +6,6 @@ #scenario-search .right { min-width: 400px ; flex: 1 ; display: flex ; flex-direction: column ; padding-left: 5px ; } #scenario-search .scenario-card { flex: 1 ; overflow-y: hidden ; } -/* splitter */ -#scenario-search .gutter { position: relative ; margin: 0 0.5em ; background-color: #ccc ; cursor: col-resize ; } -#scenario-search .gutter img { position: absolute ; top: 45% ; left: -2px ; } - /* search control */ #scenario-search .select2-container { top: 1em !important ; left: 1em !important ; } #scenario-search .select2-selection { display: none ; } diff --git a/vasl_templates/webapp/static/css/sortable.css b/vasl_templates/webapp/static/css/sortable.css index c044c2d..94c9a30 100644 --- a/vasl_templates/webapp/static/css/sortable.css +++ b/vasl_templates/webapp/static/css/sortable.css @@ -17,4 +17,4 @@ img.sortable-reset { height: 16px ; margin: -2px 0.4em 0 -2px ; } .sortable-hint .instructions { margin: 1em 0 0 1em ; font-size: 80% ; font-style: italic ; color: #888 ; } .sortable-hint .instructions li { margin: 0.5em 0 0 0.25em ; } -.sortable-trash { height: 22px ; margin-left: 6px ; } +.sortable-trash { height: 22px ; margin-left: 6px ; margin-right: 6px ; } diff --git a/vasl_templates/webapp/static/css/tabs-extras.css b/vasl_templates/webapp/static/css/tabs-extras.css index 666c6ac..ec57232 100644 --- a/vasl_templates/webapp/static/css/tabs-extras.css +++ b/vasl_templates/webapp/static/css/tabs-extras.css @@ -1,7 +1,7 @@ /* -------------------------------------------------------------------- */ #tabs-extras { height: 100% ; display: flex ; flex-direction: row ; overflow: hidden ; } -#tabs-extras .left-panel { flex: 0 0 auto ; overflow: hidden auto ; min-width: 13em ; border-right: 2px dotted #aaa; margin-right: 5px ; padding-right: 5px ; } +#tabs-extras .left-panel { flex: 0 0 auto ; overflow: hidden auto ; min-width: 13em ; max-width: 40% ; } #tabs-extras .right-panel { flex: 1 1 auto ; width: 100%; bottom: 0 ; } #tabs-extras .left-panel ul { list-style-type: none ; margin: 0 ; } @@ -17,6 +17,9 @@ #tabs-extras .right-panel div.caption { font-style: italic ; } #tabs-extras .right-panel div.description { margin-top: 0.5em ; } +#tabs-extras .right-panel button.generate { height: 30px ; } +#tabs-extras .right-panel .snippet-control .ui-selectmenu-button { height: 30px ; } + #tabs-extras .right-panel table { margin-top: 1em ; } #tabs-extras .right-panel td.caption { font-weight: bold ; padding-right: 0.25em ; } #tabs-extras .right-panel .snippet-control { margin-top: 0.5em ; } diff --git a/vasl_templates/webapp/static/css/tabs-ob.css b/vasl_templates/webapp/static/css/tabs-ob.css index b2234c9..ebc7675 100644 --- a/vasl_templates/webapp/static/css/tabs-ob.css +++ b/vasl_templates/webapp/static/css/tabs-ob.css @@ -2,13 +2,13 @@ .panel-ob_setups { height: 100% ; display: flex ; flex-direction: column ; } .panel-ob_setups .content { flex-grow: 1 ; } -.panel-ob_setups .footer { margin-top: 0.5em ; padding-bottom: 1px ; display: flex ; align-items: center ; } +.panel-ob_setups .footer { margin-top: 0.5em ; display: flex ; align-items: center ; } /* -------------------------------------------------------------------- */ .panel-ob_notes { height: 100% ; display: flex ; flex-direction: column ; } .panel-ob_notes .content { flex-grow: 1 ; } -.panel-ob_notes .footer { margin-top: 0.5em ; padding-bottom: 1px ; display: flex ; align-items: center ; } +.panel-ob_notes .footer { margin-top: 0.5em ; display: flex ; align-items: center ; } /* -------------------------------------------------------------------- */ diff --git a/vasl_templates/webapp/static/css/tabs-scenario.css b/vasl_templates/webapp/static/css/tabs-scenario.css index e3da179..5416024 100644 --- a/vasl_templates/webapp/static/css/tabs-scenario.css +++ b/vasl_templates/webapp/static/css/tabs-scenario.css @@ -1,6 +1,7 @@ /* -------------------------------------------------------------------- */ #panel-scenario { display: flex ; flex-direction: column ; } +fieldset[name='scenario'] { min-height: 91px ; max-height: 265px ; overflow: hidden ; } #panel-scenario .row { display: flex ; align-items: center ; margin-bottom: 2px ; } #panel-scenario input { flex-grow: 1 ; } diff --git a/vasl_templates/webapp/static/css/tabs.css b/vasl_templates/webapp/static/css/tabs.css index 8ca146e..e246537 100644 --- a/vasl_templates/webapp/static/css/tabs.css +++ b/vasl_templates/webapp/static/css/tabs.css @@ -21,29 +21,29 @@ #tabs-scenario { display: flex ; } #tabs-scenario .left { width: 29.25em ; min-width: 29.25em ; } -#tabs-scenario .right { flex-grow: 1 ; min-width: 25em ; } +#tabs-scenario .right { flex-grow: 1 ; min-width: 26em ; } #tabs-scenario .left { display: flex ; flex-direction: column ; } -#tabs-scenario .tl { flex-basis: content ; } #tabs-scenario .bl { height: 100% ; flex-grow: 1 ; } #tabs-scenario .right { display: flex ; flex-direction: column ; } #tabs-scenario .tr { height: 100% ; flex-grow: 1 ; } -#tabs-scenario .br { height: 100% ; flex-grow: 1 ; } +#tabs-scenario .br { height: 100% ; flex-grow: 1 ; min-height: 9em ; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ .ui-tabs-panel.tabs-ob { display: flex ; } -.ui-tabs-panel.tabs-ob .left { flex-grow: 1 ; min-width: 32em ; } -.ui-tabs-panel.tabs-ob .right { width: 28em ; min-width: 26em ; } +.ui-tabs-panel.tabs-ob .left { flex-grow: 1 ; min-width: 20em ; } +.ui-tabs-panel.tabs-ob .right { width: 28em ; min-width: 20em ; } .ui-tabs-panel.tabs-ob .left { display: flex ; flex-direction: column ; } -.ui-tabs-panel.tabs-ob .tl { height: 100% ; flex-grow: 1 } -.ui-tabs-panel.tabs-ob .bl { height: 100% ; flex-grow: 1 } +.ui-tabs-panel.tabs-ob .tl { height: 100% ; flex-grow: 1 ; min-height: 9em ; } +.ui-tabs-panel.tabs-ob .bl { height: 100% ; flex-grow: 1 ; min-height: 9em ; } .ui-tabs-panel.tabs-ob .right { display: flex ; flex-direction: column ; } -.ui-tabs-panel.tabs-ob .tr { height: 100% ; flex-grow: 1 } -.ui-tabs-panel.tabs-ob .br { height: 100% ; flex-grow: 1 } +/* NOTE: min-height for the vehicle/ordnance panels are set dynamically. */ +.ui-tabs-panel.tabs-ob .tr { height: 100% ; flex-grow: 1 ; } +.ui-tabs-panel.tabs-ob .br { height: 100% ; flex-grow: 1 ; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ diff --git a/vasl_templates/webapp/static/extras.js b/vasl_templates/webapp/static/extras.js index 43d0a9d..deb3b65 100644 --- a/vasl_templates/webapp/static/extras.js +++ b/vasl_templates/webapp/static/extras.js @@ -4,12 +4,13 @@ function init_extras() { // initialize the layout - $( "#tabs-extras .left-panel" ).resizable( { - resizeHeight: false, - handles: "e", - create: function( event, ui ) { - $( ".ui-resizable-e" ).css( "cursor", "ew-resize" ) ; - }, + Split( [ "#tabs-extras .left-panel", "#tabs-extras .right-panel" ], { + direction: "horizontal", + sizes: [ 1, 99 ], + gutterSize: 8, + } ) ; + addSplitterGripper( $( "#tabs-extras .left-panel + .gutter" ), true, 8, { + margin: "5px 2px", "background-color": "inherit" } ) ; // identify the extras templates diff --git a/vasl_templates/webapp/static/images/gripper-horz.png b/vasl_templates/webapp/static/images/gripper-horz.png deleted file mode 100644 index 615b6c4bdee693b800f0a7e49a2310ac25016be7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 139 zcmeAS@N?(olHy`uVBq!ia0vp^azM<%!2~1|@7^c|QjEnx?oJHr&dIz4a#+$GeH|GX zHuiJ>Nn{1`ISV`@fr|JJgD~Uq{1qucK?P42#}JL+WD91t{|6g(#J4*)iQXx`njxgN@xNAo~0!U diff --git a/vasl_templates/webapp/static/images/gripper-vert.png b/vasl_templates/webapp/static/images/gripper-vert.png deleted file mode 100644 index 7c84d007d59c95e5966a72a2de4423943eb1bcdf..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 355 zcmeAS@N?(olHy`uVBq!ia0vp^96&6`!2~4dJvtEuq&N#aB8wRq_>O=u<5X=vX`mo` ziKnkC`x6c+P90Iv7rTLSKq1$N635b#jQk>omFv!U0EKu!LN2Mr$wiq3C7Jno48oj> z%0O{0khpVxL1j^9dPWJu8vZj@Kv6!hXi;h+NU1_eW^O8j>34okpbRHSCOAK>q&%@G zl_9p^KS((@*znBaO=u<5X=vX`mo` ziKnkC`!fy>4lTAqG0rVuA=ii!$I_CF{33>x>&|!pg?LJULN2Mr$wiq3C7Jno48oj> z%0O{0khpVxL1j^9dPWJu8vZj@Kv6!hXi;h+NU1_eW^O8j>34okpbRHSCOAK>q&%@G zl_9p^KS((@*znBalAKhA74I&o14Z;aT^vI+CMMeyJYZmEZr;21 z@4;sFiIP4%77UO7|Np%o5*k{Q4e=+NRajc>SXYA^>bP0l+XkK DU)*k* literal 0 HcmV?d00001 diff --git a/vasl_templates/webapp/static/images/vsplitter-gripper.png b/vasl_templates/webapp/static/images/vsplitter-gripper.png new file mode 100644 index 0000000000000000000000000000000000000000..b8ec585de7aee25134ec0b4e23d56334490c3b22 GIT binary patch literal 358 zcmeAS@N?(olHy`uVBq!ia0vp^azM<%!2~1|@7^c|Qk(@IkwBX72naJy)#j513bL1Y z`ns||Ge3_(m{U<1 zD9!~Ecg`=UEXqvJC}CK`f5r+Z$_ExLN=*bQRVc~KO=U3s&d&*y;RMM9=ckpFCl;kL z#1{MqDdz?oo>`onlL%B=#IXIqmVTfx2S_+Pu_!MyFP-6l^s{!L7&}CNX;E@2!`J`K zuVKoZ^K)}k^GX=Lotd^DD8>d-7Lr+#lghB--6eIPh@q#8V~EDYWSfEq49v{Ud-vKh zGao+K%)atOTG9f^gg^iP+xPaQEzDEsVdIc9<7H-HST5y#sq0;)El@Lqr>mdKI;Vst E048p3R{#J2 literal 0 HcmV?d00001 diff --git a/vasl_templates/webapp/static/lfa.js b/vasl_templates/webapp/static/lfa.js index 6a08004..8abe799 100644 --- a/vasl_templates/webapp/static/lfa.js +++ b/vasl_templates/webapp/static/lfa.js @@ -147,11 +147,12 @@ window.show_lfa_dialog = function( resp ) direction: "vertical", sizes: [ 60, 40 ], minSize: [ 350, 200 ], /* nb: this needs to be set in the CSS as well */ - gutterSize: 3, + gutterSize: 1, onDrag: updateLayout, } ) ; - var $gripper = $( "" ) ; - $( "#lfa .gutter.gutter-vertical" ).append( $gripper ) ; + addSplitterGripper( $("#lfa .gutter"), false, 1, { + "margin-bottom": 3, "z-index": 49, + } ) ; // initialize other controls $(this).find( "select[name='roll-type']" ).selectmenu( { width: 70, diff --git a/vasl_templates/webapp/static/main.js b/vasl_templates/webapp/static/main.js index d568c5a..35e11d9 100644 --- a/vasl_templates/webapp/static/main.js +++ b/vasl_templates/webapp/static/main.js @@ -10,6 +10,7 @@ gOnlineCounterImages = {} ; gAslRulebook2VoNoteTargets = {} ; gWebChannelHandler = null ; +gPlayerOBSplitters = {} ; gEmSize = null ; var NATIONALITY_SPECIFIC_BUTTONS = { @@ -249,6 +250,9 @@ $(document).ready( function () { $sel.data( "select2" ).$results.css( "max-height", "15em" ) ; } + // initialize the splitters + initSplitters() ; + // get the application config $.getJSON( gAppConfigUrl, function(data) { gAppConfig = data ; @@ -422,7 +426,7 @@ $(document).ready( function () { // handle requests to edit the templates $("button.edit-template").click( function() { edit_template( $(this).data( "id" ) ) ; - } ).html( "
Edit
" ) + } ).html( "
Edit
" ) .attr( "title", EDIT_TEMPLATE_HINT ) .button( {} ) ; @@ -548,6 +552,83 @@ function init_player_droplists() // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +function initSplitters() +{ + // add splitters to the SCENARIO tab + Split( [ "#tabs-scenario .left", "#tabs-scenario .right" ], { + direction: "horizontal", + sizes: [ 1, 99 ], + gutterSize: 8, + } ) ; + addSplitterGripper( $( "#tabs-scenario .left + .gutter" ), true, 8, { + margin: "5px -2px", "background-color": "inherit" + } ) ; + Split( [ "#tabs-scenario .left .tl", "#tabs-scenario .left .bl" ], { + direction: "vertical", + sizes: [ 99, 1 ], + gutterSize: 8, + } ) ; + addSplitterGripper( $( "#tabs-scenario .left .gutter" ), false, 8, { + margin: "-2px 5px -6px 5px", "background-color": "inherit", + } ) ; + Split( [ "#tabs-scenario .right .tr", "#tabs-scenario .right .br" ], { + direction: "vertical", + sizes: [ 50, 50 ], + gutterSize: 8, + } ) ; + addSplitterGripper( $( "#tabs-scenario .right .gutter" ), false, 8, { + margin: "-2px 5px -6px 5px", "background-color": "inherit", + } ) ; + + // add splitters to the OB tabs + // NOTE: The split sizes will be set later by on_player_change(). + function initOBSplitter( col ) { + var $col = $( "#tabs-ob" + playerNo + " ." + col ) ; + gPlayerOBSplitters[ playerNo ].push( + Split( [ $col.find( ".t"+col[0] )[0], $col.find( ".b"+col[0] )[0] ], { + direction: "vertical", + gutterSize: 8, + } ) + ) ; + addSplitterGripper( $col.find(".gutter"), false, 8, { + margin: "-2px 5px -6px 5px", "background-color": "inherit", + } ) ; + } + for ( var playerNo=1 ; playerNo <= 2 ; ++playerNo ) { + gPlayerOBSplitters[ playerNo ] = [] ; + gPlayerOBSplitters[ playerNo ].push( + Split( [ "#tabs-ob"+playerNo+" .left", "#tabs-ob"+playerNo+" .right" ], { + direction: "horizontal", + gutterSize: 8, + } ) + ) ; + addSplitterGripper( $( "#tabs-ob"+playerNo+" .left + .gutter" ), true, 8, { + margin: "5px -2px", "background-color": "inherit", + } ) ; + [ "left", "right" ].forEach( initOBSplitter ) ; + } +} + +function updatePlayerOBSplitters( playerNo ) +{ + // FUDGE! We want to set the minimum width of the left column in the OB tab based on how many + // extra template buttons the nationality has in the NOTES panel, but their widths will be 0 + // if another tab is active. + // Instead, we count how many buttons there are, and estimate what the min-width should be, + // based on the number of buttons and their captions. + var nButtons=0, nChars=0 ; + $( "#panel-ob_notes_" + playerNo + " .footer .snippet-control" ).each( function() { + if ( $(this).css( "display" ) === "none" ) + return ; + nButtons += 1 ; + nChars += $(this).find( "button.generate" ).text().length ; + } ) ; + var minWidth = Math.max( 270 + 60*nButtons + gEmSize*nChars*0.5, 320 ) ; + $( "#tabs-ob" + playerNo + " .left" ).css( "min-width", minWidth ) ; +} + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + function init_snippet_button( $btn ) { // figure out what template we're dealing with @@ -594,7 +675,7 @@ function init_snippet_button( $btn ) return false ; } ) .attr( "title", GENERATE_SNIPPET_HINT ) - .css( { "padding-right": $btn.text() !== "" ? "5px" : "0" } ) ; + .css( { "padding-right": $btn.text() !== "" ? "10px" : "0" } ) ; // add in the droplist $newBtn.controlgroup() ; @@ -874,9 +955,10 @@ function on_player_change( player_no ) var $fieldset = $( "#tabs-ob" + player_no + " fieldset[name='ob_" + vo_type + "_" + player_no ) ; $fieldset.find( ".snippets-notes" ).css( "display", show?"block":"none" ) ; $fieldset.find( "label[for='ob']" ).css( "display", show?"inline-block":"none" ) ; + return show ; } - update_ma_notes_controls( "vehicles" ) ; - update_ma_notes_controls( "ordnance" ) ; + var hasVehicles = update_ma_notes_controls( "vehicles" ) ; + var hasOrdnance = update_ma_notes_controls( "ordnance" ) ; // TO DO: We should also show a button that lets the ob_vehicle/ordnance_note template to be edited. // reset the OB params @@ -892,14 +974,23 @@ function on_player_change( player_no ) function update_add_vo_button( vo_type ) { var $panel = $( "#panel-ob_" + vo_type + "_" + player_no ) ; if ( gVehicleOrdnanceListings[ vo_type ] !== undefined && gVehicleOrdnanceListings[vo_type][ player_nat ] !== undefined ) { + var hasMaNotes = (vo_type === "vehicles" && hasVehicles) || (vo_type === "ordnance" && hasOrdnance) ; + $panel.parent().css( "min-height", hasMaNotes ? "10.7em" : "9em" ) ; $panel.find( ".footer" ).show() ; } else { + $panel.parent().css( "min-height", "2.5em" ) ; $panel.find( ".footer" ).hide() ; $panel.find( ".sortable-hint" ).html( "There are no " + vo_type + " available." ) ; } } update_add_vo_button( "vehicles" ) ; update_add_vo_button( "ordnance" ) ; + + // reset the player's splitters + updatePlayerOBSplitters( player_no ) ; + gPlayerOBSplitters[ player_no ].forEach( function( splitter ) { + splitter.setSizes( [ 50, 50 ] ) ; + } ) ; } // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -1021,6 +1112,8 @@ function adjust_footer_vspacers() var footer_bottom = $footer.position().top + $footer.height() ; var delta = footer_bottom - fieldset_bottom ; delta -= 4 ; + if ( gWebChannelHandler && $(this).attr("name").indexOf( "ob_" ) === 0 ) + delta += 28 ; // add a vertical spacer after the footer (to push it up a bit) $footer.after( "
" ) ; } ) ; diff --git a/vasl_templates/webapp/static/scenarios.js b/vasl_templates/webapp/static/scenarios.js index 55868ce..95d406b 100644 --- a/vasl_templates/webapp/static/scenarios.js +++ b/vasl_templates/webapp/static/scenarios.js @@ -114,11 +114,12 @@ function initDialog( $dlg, scenarios ) Split( [ $dlg.find( ".left" )[0], $dlg.find( ".right" )[0] ], { sizes: [ 30, 70 ], direction: "horizontal", - gutterSize: 3, + gutterSize: 1, onDrag: updateLayout, } ) ; - var $gripper = $( "" ) ; - $dlg.find( ".gutter.gutter-horizontal" ).append( $gripper ) ; + addSplitterGripper( $dlg.find(".gutter"), true, 1, { + margin: "0 5px", + } ) ; } // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vasl_templates/webapp/static/snippets.js b/vasl_templates/webapp/static/snippets.js index 4317849..836ee5b 100644 --- a/vasl_templates/webapp/static/snippets.js +++ b/vasl_templates/webapp/static/snippets.js @@ -2451,5 +2451,7 @@ function on_scenario_theater_change() // show/hide the nationality-specific buttons update_nationality_specific_buttons( 1 ) ; + updatePlayerOBSplitters( 1 ) ; update_nationality_specific_buttons( 2 ) ; + updatePlayerOBSplitters( 2 ) ; } diff --git a/vasl_templates/webapp/static/sortable.js b/vasl_templates/webapp/static/sortable.js index e3793d3..4ee672d 100644 --- a/vasl_templates/webapp/static/sortable.js +++ b/vasl_templates/webapp/static/sortable.js @@ -77,7 +77,7 @@ $.fn.sortable2 = function( action, args ) $sortable2.data( "no_confirm_delete", args.no_confirm_delete ) ; $sortable2.data( "on_edit", args.edit ) ; var $add_btn = find_helper( $sortable2, "add" ) ; - $add_btn.prepend( $( "
" + + $add_btn.prepend( $( "
" + "" + "Add" + "
" @@ -88,7 +88,7 @@ $.fn.sortable2 = function( action, args ) if ( args.reset ) { $sortable2.data( "on_reset", args.reset ) ; var $reset_btn = find_helper( $sortable2, "reset" ) ; - $reset_btn.prepend( $( "
Reset
" ) ) + $reset_btn.prepend( $( "
Reset
" ) ) .button( {} ) ; var $reset = find_helper( $sortable2, "reset" ) ; $reset.prop( "title", "Reset the " + display_name[1] ) diff --git a/vasl_templates/webapp/static/utils.js b/vasl_templates/webapp/static/utils.js index 88fc171..c7f4d86 100644 --- a/vasl_templates/webapp/static/utils.js +++ b/vasl_templates/webapp/static/utils.js @@ -440,6 +440,27 @@ function add_flag_to_dialog_titlebar( $dlg, player_no ) ).css( { display: "flex", "align-items": "center" } ) ; } +function addSplitterGripper( $gutter, horz, gutterSize, gutterStyle ) +{ + // add a gripper image to a splitter + var key = (horz ? "h" : "v") + "splitter-gripper" ; + var $gripper = $( + "" + ) ; + $gutter.append( $gripper ) ; + if ( horz ) { + $gutter.css( "min-width", gutterSize ) ; + var gripperLeft = - Math.floor( (8 - gutterSize) / 2 ) ; + $gripper.css( "left", gripperLeft ) ; + } else { + $gutter.css( { "min-height": gutterSize } ) ; + var gripperTop = - Math.floor( (8 - gutterSize) / 2 ) ; + $gripper.css( { "top": gripperTop } ) ; + } + if ( gutterStyle ) + $gutter.css( gutterStyle ) ; +} + function makeSnippetHotHover( $sel ) { $sel.hover( diff --git a/vasl_templates/webapp/static/vo2.js b/vasl_templates/webapp/static/vo2.js index d55f9e1..4bbc070 100644 --- a/vasl_templates/webapp/static/vo2.js +++ b/vasl_templates/webapp/static/vo2.js @@ -183,10 +183,11 @@ function _do_edit_ob_vo( $entry, player_no, vo_type ) if ( gEditVoDialogSplitter === null ) { gEditVoDialogSplitter = Split( [ "#edit-vo .capabilities", "#edit-vo .comments" ], { "direction": "vertical", - gutterSize: 3 + gutterSize: 1 + } ) ; + addSplitterGripper( $("#edit-vo .gutter"), false, 1, { + margin: "13px 8em -13px 8em" } ) ; - 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. diff --git a/vasl_templates/webapp/templates/tabs-ob1.html b/vasl_templates/webapp/templates/tabs-ob1.html index 3d68adb..6fa9628 100644 --- a/vasl_templates/webapp/templates/tabs-ob1.html +++ b/vasl_templates/webapp/templates/tabs-ob1.html @@ -67,15 +67,11 @@
-
- - - +
+
-
- - - +
+
@@ -95,15 +91,11 @@
-
- - - +
+
-
- - - +
+
diff --git a/vasl_templates/webapp/templates/tabs-scenario.html b/vasl_templates/webapp/templates/tabs-scenario.html index 8708741..282317b 100644 --- a/vasl_templates/webapp/templates/tabs-scenario.html +++ b/vasl_templates/webapp/templates/tabs-scenario.html @@ -42,14 +42,15 @@ R2: Swap
-
+
- + +
-
+
@@ -60,7 +61,7 @@
-
+
@@ -107,8 +108,8 @@
- - + +
@@ -125,8 +126,8 @@ - - + +