Highlight sortable entries on mouse-over.

master
Pacman Ghost 6 years ago
parent 9b1e3d5382
commit 784733c1c7
  1. 4
      vasl_templates/webapp/data/default-template-pack/atmm.j2
  2. 4
      vasl_templates/webapp/data/default-template-pack/baz.j2
  3. 4
      vasl_templates/webapp/data/default-template-pack/mol-p.j2
  4. 4
      vasl_templates/webapp/data/default-template-pack/mol.j2
  5. 18
      vasl_templates/webapp/data/default-template-pack/nationalities.json
  6. 4
      vasl_templates/webapp/data/default-template-pack/ob_ordnance.j2
  7. 6
      vasl_templates/webapp/data/default-template-pack/ob_setup.j2
  8. 4
      vasl_templates/webapp/data/default-template-pack/ob_vehicles.j2
  9. 4
      vasl_templates/webapp/data/default-template-pack/pf.j2
  10. 4
      vasl_templates/webapp/data/default-template-pack/piat.j2
  11. 4
      vasl_templates/webapp/data/default-template-pack/psk.j2
  12. 10
      vasl_templates/webapp/static/css/sortable.css
  13. 2
      vasl_templates/webapp/static/main.js
  14. 8
      vasl_templates/webapp/static/simple_notes.js
  15. 39
      vasl_templates/webapp/static/sortable.js
  16. 4
      vasl_templates/webapp/static/vo.js

@ -10,8 +10,8 @@ td { margin: 0 ; padding: 0 ; }
<tr>
<td colspan="2" style="
background: #{{OB_COLOR}} ;
border-bottom: 1px solid #{{OB_COLOR_2}} ;
background: {{OB_COLOR}} ;
border-bottom: 1px solid {{OB_COLOR_2}} ;
padding: 2px 5px ;
font-weight: bold ;
">

@ -12,8 +12,8 @@ td.r { text-align: right ; }
<tr>
<td colspan="2" style="
background: #{{OB_COLOR}} ;
border-bottom: 1px solid #{{OB_COLOR_2}} ;
background: {{OB_COLOR}} ;
border-bottom: 1px solid {{OB_COLOR_2}} ;
padding: 2px 5px ;
font-weight: bold ;
">

@ -13,8 +13,8 @@ ul { margin: 0 0 0 10px ; padding: 0 ; }
<tr>
<td colspan="2" style="
background: #{{OB_COLOR}} ;
border-bottom: 1px solid #{{OB_COLOR_2}} ;
background: {{OB_COLOR}} ;
border-bottom: 1px solid {{OB_COLOR_2}} ;
padding: 2px 5px ;
font-weight: bold ;
">

@ -11,8 +11,8 @@ ul { margin: 0 0 0 10px ; padding: 0 ; }
<tr>
<td colspan="2" style="
background: #{{OB_COLOR}} ;
border-bottom: 1px solid #{{OB_COLOR_2}} ;
background: {{OB_COLOR}} ;
border-bottom: 1px solid {{OB_COLOR_2}} ;
padding: 2px 5px ;
font-weight: bold ;
">

@ -2,42 +2,42 @@
"german": {
"display_name": "German",
"ob_colors": [ "d3edfc", "91cdf5" ]
"ob_colors": [ "#d3edfc", "#91cdf5" ]
},
"russian": {
"display_name": "Russian",
"ob_colors": [ "eabe51", "d68d1a" ]
"ob_colors": [ "#eabe51", "#d68d1a" ]
},
"american": {
"display_name": "American",
"ob_colors": [ "e5f700", "cdf000" ]
"ob_colors": [ "#e5f700", "#cdf000" ]
},
"british": {
"display_name": "British",
"ob_colors": [ "f6edda", "e5cea0" ]
"ob_colors": [ "#f6edda", "#e5cea0" ]
},
"french": {
"display_name": "French",
"ob_colors": [ "a2ddff", "41a5ff" ]
"ob_colors": [ "#a2ddff", "#41a5ff" ]
},
"italian": {
"display_name": "Italian",
"ob_colors": [ "dde0e2", "a6adb2" ]
"ob_colors": [ "#dde0e2", "#a6adb2" ]
},
"finnish": {
"display_name": "Finnish",
"ob_colors": [ "edefef", "ced3d3" ]
"ob_colors": [ "#edefef", "#ced3d3" ]
},
"japanese": {
"display_name": "Japanese",
"ob_colors": [ "fff200", "ffdb00" ]
"ob_colors": [ "#fff200", "#ffdb00" ]
}
}
}

@ -13,8 +13,8 @@ td { margin: 0 ; padding: 0 ; }
<tr>
<td colspan="2" style="
background: #{{OB_COLOR}} ;
border-bottom: 1px solid #{{OB_COLOR_2}} ;
background: {{OB_COLOR}} ;
border-bottom: 1px solid {{OB_COLOR_2}} ;
padding: 2px 5px ;
font-weight: bold ;
">

@ -4,8 +4,8 @@
<tr>
<td style="
background: #{{OB_COLOR}} ;
border-bottom: 1px solid #{{OB_COLOR_2}} ;
background: {{OB_COLOR}} ;
border-bottom: 1px solid {{OB_COLOR_2}} ;
padding: 2px 5px ;
font-weight: bold ;
{%if OB_SETUP_WIDTH%} width: {{OB_SETUP_WIDTH}} ; {%endif%}
@ -14,4 +14,4 @@
</table>
</html>
</html>

@ -13,8 +13,8 @@ td { margin: 0 ; padding: 0 ; }
<tr>
<td colspan="2" style="
background: #{{OB_COLOR}} ;
border-bottom: 1px solid #{{OB_COLOR_2}} ;
background: {{OB_COLOR}} ;
border-bottom: 1px solid {{OB_COLOR_2}} ;
padding: 2px 5px ;
font-weight: bold ;
">

@ -12,8 +12,8 @@ td.r { text-align: right ; }
<tr>
<td colspan="3" style="
background: #{{OB_COLOR}} ;
border-bottom: 1px solid #{{OB_COLOR_2}} ;
background: {{OB_COLOR}} ;
border-bottom: 1px solid {{OB_COLOR_2}} ;
padding: 2px 5px ;
font-weight: bold ;
">

@ -12,8 +12,8 @@ td.r { text-align: right ; }
<tr>
<td colspan="2" style="
background: #{{OB_COLOR}} ;
border-bottom: 1px solid #{{OB_COLOR_2}} ;
background: {{OB_COLOR}} ;
border-bottom: 1px solid {{OB_COLOR_2}} ;
padding: 2px 5px ;
font-weight: bold ;
">

@ -12,8 +12,8 @@ td.r { text-align: right ; }
<tr>
<td colspan="2" style="
background: #{{OB_COLOR}} ;
border-bottom: 1px solid #{{OB_COLOR_2}} ;
background: {{OB_COLOR}} ;
border-bottom: 1px solid {{OB_COLOR_2}} ;
padding: 2px 5px ;
font-weight: bold ;
">

@ -3,16 +3,14 @@ img.sortable-add { vertical-align: middle ; height: 15px ; margin-right: 0.25em
.sortable { font-size: 80% ; }
.sortable { list-style-type: none ; margin: 0 ; padding: 0 ; }
.sortable li {
margin-bottom: 2px ; padding: 5px ;
background: #f0f0f0 ; border-bottom: 1px solid #c0c0c0 ; border-right: 1px solid #c0c0c0 ;
}
.sortable li.highlighted { background: #48c8ff ; }
.sortable li { margin-bottom: 2px ; padding: 5px ; }
.sortable li:hover { cursor: pointer ; }
.sortable li.ui-sortable-helper { opacity: 0.8 ; }
.sortable li img.snippet { height: 1.25em ; margin: -2px -2px ; padding-left: 1em ; float: right ; }
.sortable-hint { width:100% ; height: calc(100% - 1.5em) ; color: #666 ; }
.sortable-hint { width: 100% ; height: calc(100% - 1.5em) ; color: #666 ; }
.sortable-hint .instructions { margin: 1em 0 0 1em ; font-size: 80% ; font-style: italic ; color: #888 ; }
.sortable-hint .instructions li { margin-top: 0.5em ; }

@ -528,7 +528,7 @@ function on_tab_activate( evt, ui )
// set the tab being activated
function set_colors_for_player( tab_id, player_no ) {
var colors = get_player_colors( player_no ) ;
set_colors( tab_id, "#"+colors[0], "#"+colors[1] ) ;
set_colors( tab_id, colors[0], colors[1] ) ;
}
tab_id = ui.newPanel.prop( "id" ) ;
if ( tab_id === "tabs-ob1" )

@ -58,12 +58,10 @@ function _do_edit_simple_note( $sortable2, $entry, default_width )
var $dlg = $(this) ;
$width.keydown( function(evt) { auto_dismiss_dialog( $dlg, evt, "OK" ) ; } ) ;
// set the titlebar color
var colors = get_player_colors_for_element( $sortable2 ) ;
if ( ! colors )
colors = [ "d0d0d0", "ca0a0a0" ] ;
var colors = get_player_colors_for_element($sortable2) || ["#d0d0d0","#ca0a0a0"] ;
$(".ui-dialog.edit-simple_note .ui-dialog-titlebar").css( {
background: "#"+colors[0],
border: "1px solid #"+colors[1]
background: colors[0],
border: "1px solid "+colors[1]
} ) ;
// load the dialog
var data = $entry ? $entry.data("sortable2-data") : null ;

@ -88,7 +88,10 @@ $.fn.sortable2 = function( action, args )
var $trash = find_helper( $sortable2, "trash" ) ;
$trash.prop( "src", gImagesBaseUrl + "/trash.png" )
.prop( "title", "Drag " + display_name[2] + " " + display_name[0] + " here to delete it." ) ;
$sortable2.sortable( { connectWith: $trash, cursor: "move" } ) ;
$sortable2.sortable( {
stop: function( evt, ui ) { set_entry_colors( ui.item, false ) ; },
connectWith: $trash, cursor: "move"
} ) ;
$trash.sortable( {
receive: function( evt, ui ) {
ui.item.remove() ;
@ -114,20 +117,19 @@ $.fn.sortable2 = function( action, args )
// style the entry
// NOTE: Colors aren't going to work when we're using the test template pack!
var colors = get_player_colors_for_element( $sortable2 ) ;
if ( colors ) {
$entry.css( {
"background": "#"+colors[0],
"border-bottom": "1px solid #"+colors[1],
"border-right": "1px solid #"+colors[1],
} ) ;
}
var colors = get_player_colors_for_element($sortable2) || ["#f0f0f0","#c0c0c0"] ;
$entry.data( "colors", colors ) ;
set_entry_colors( $entry, false ) ;
$entry.on( {
"mouseenter": function() { set_entry_colors( $entry, true ) ; },
"mouseleave": function() { set_entry_colors( $entry, false ) ; }
} ) ;
}
function delete_entry( $sortable2, $entry )
{
// ask if it's OK to delete the entry
$entry.addClass( "highlighted" ) ;
set_entry_colors( $entry, true ) ;
var caption = $entry.data( "sortable2-data" ).caption ;
if ( ! caption )
caption = $entry.html() ;
@ -139,13 +141,13 @@ $.fn.sortable2 = function( action, args )
"</div>"
] ;
ask( "Delete "+display_name[0], buf.join(""), {
"ok": function() {
ok: function() {
// yup - make it so
$entry.remove() ;
adjust_entry_heights( $sortable2 ) ;
update_hint( $sortable2 ) ;
},
"close": function() { $entry.removeClass("highlighted") ; },
close: function() { set_entry_colors( $entry, false ) ; },
} ) ;
}
@ -188,6 +190,19 @@ $.fn.sortable2 = function( action, args )
} ) ;
}
function set_entry_colors( $entry, invert )
{
// set the entry colors
var colors = $entry.data( "colors" ) ;
if ( $entry.hasClass( "ui-sortable-helper" ) )
invert = true ; // nb: drag is in progress
$entry.css( {
"background": colors[invert?1:0],
"border-bottom": "1px solid "+colors[invert?0:1],
"border-right": "1px solid "+colors[invert?0:1],
} ) ;
}
function find_helper( $sortable2, type ) {
// find a helper element for the sortable2
var id = $sortable2.prop( "id" ) ;

@ -47,8 +47,8 @@ function add_vo( vo_type, player_no )
// set the titlebar color
var colors = get_player_colors_for_element( $sortable2 ) ;
$(".ui-dialog.select-vo .ui-dialog-titlebar").css( {
background: "#"+colors[0],
border: "1px solid #"+colors[1],
background: colors[0],
border: "1px solid "+colors[1],
} ) ;
},
buttons: {

Loading…
Cancel
Save