Restyle options view with horizontal form layout

pull/1459/head
Kyle Johnson 2016-03-15 14:43:22 -04:00
parent 2214cb6389
commit d12fc95ad1
3 changed files with 36 additions and 75 deletions

View File

@ -26,7 +26,6 @@ body {
font-size: 18px;
color: #333333;
font-weight: normal;
text-align: center;
}
h1 {
@ -84,10 +83,6 @@ a:hover {
text-decoration: underline;
}
label {
margin-right: 4px;
}
input,textarea,select,button {
border: 1px #7f7fb2 solid;
font-family: inherit;

View File

@ -1,24 +0,0 @@
input.small {
width: 6em;
}
input.medium {
width: 9em;
}
input.large {
width: 20em;
}
#contentTable.optionTable th, #contentTable.optionTable td {
vertical-align: top;
}
#contentTable.userTable th, #contentTable.userTable td {
text-align: center;
}
#contentTable.userTable .colMonitor, #contentTable.userTable .colUsername {
text-align: left;
}

View File

@ -98,38 +98,36 @@ if($tab == 'skins') {
echo "<script type=\"text/javascript\">window.opener.location.reload();window.location.href=\"{$_SERVER['PHP_SELF']}?view={$view}&tab={$tab}\"</script>";
?>
<form name="optionsForm" method="get" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<form name="optionsForm" class="form-horizontal" method="get" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<input type="hidden" name="view" value="<?php echo $view ?>"/>
<input type="hidden" name="tab" value="<?php echo $tab ?>"/>
<table class="table table-striped" cellspacing="0">
<thead><tr><th><?php echo translate('Name') ?></th><th><?php echo translate('Description') ?></th> <th><?php echo translate('Value') ?></th></tr></thead>
<tbody>
<tr>
<td>ZM_SKIN</td>
<td><?php echo translate('SkinDescription'); ?></td>
<td><select name="skin-choice">
<div class="form-group">
<label for="skin-choice" class="col-sm-3 control-label">ZM_SKIN</label>
<div class="col-sm-6">
<select name="skin-choice" class="form-control">
<?php
foreach($skin_options as $dir) {
echo '<option value="'.$dir.'" '.($current_skin==$dir ? 'SELECTED="SELECTED"' : '').'>'.$dir.'</option>';
}
?>
</select>
</td>
</tr>
<tr>
<td>ZM_CSS</td>
<td><?php echo translate('CSSDescription'); ?></td>
<td><select name="css-choice">
</select>
<span class="help-block"><?php echo translate('SkinDescription'); ?></span>
</div>
</div>
<div class="form-group">
<label for="css-choice" class="col-sm-3 control-label">ZM_CSS</label>
<div class="col-sm-6">
<select name="css-choice" class="form-control">
<?php
foreach( array_map( 'basename', glob('skins/'.$current_skin.'/css/*',GLOB_ONLYDIR) ) as $dir) {
echo '<option value="'.$dir.'" '.($current_css==$dir ? 'SELECTED="SELECTED"' : '').'>'.$dir.'</option>';
}
?>
</select>
</td>
</tr>
</tbody>
</table>
</select>
<span class="help-block"><?php echo translate('CSSDescription'); ?></span>
</div>
</div>
<div id="contentButtons">
<input type="submit" class="btn btn-primary btn-lg" value="<?php echo translate('Save') ?>"<?php echo $canEdit?'':' disabled="disabled"' ?>/>
</div>
@ -246,19 +244,10 @@ elseif ( $tab == "users" )
}
?>
<form name="optionsForm" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<form name="optionsForm" class="form-horizontal" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<input type="hidden" name="view" value="<?php echo $view ?>"/>
<input type="hidden" name="tab" value="<?php echo $tab ?>"/>
<input type="hidden" name="action" value="options"/>
<table id="contentTable" class="table table-striped" cellspacing="0">
<thead>
<tr>
<th><?php echo translate('Name') ?></th>
<th><?php echo translate('Description') ?></th>
<th><?php echo translate('Value') ?></th>
</tr>
</thead>
<tbody>
<?php
$configCat = $configCats[$tab];
foreach ( $configCat as $name=>$value )
@ -266,26 +255,25 @@ elseif ( $tab == "users" )
$shortName = preg_replace( '/^ZM_/', '', $name );
$optionPromptText = !empty($OLANG[$shortName])?$OLANG[$shortName]['Prompt']:$value['Prompt'];
?>
<tr>
<td><?php echo $shortName ?></td>
<td><?php echo validHtmlStr($optionPromptText) ?>&nbsp;(<?php echo makePopupLink( '?view=optionhelp&amp;option='.$name, 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
<div class="form-group">
<label for="<?php echo $name ?>" class="col-sm-3 control-label"><?php echo $shortName ?></label>
<div class="col-sm-6">
<?php
if ( $value['Type'] == "boolean" )
{
?>
<td><input type="checkbox" id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" value="1"<?php if ( $value['Value'] ) { ?> checked="checked"<?php } ?><?php echo $canEdit?'':' disabled="disabled"' ?>/></td>
<input type="checkbox" id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" value="1"<?php if ( $value['Value'] ) { ?> checked="checked"<?php } ?><?php echo $canEdit?'':' disabled="disabled"' ?>/>
<?php
}
elseif ( preg_match( "/\|/", $value['Hint'] ) )
{
?>
<td class="nowrap">
<?php
$options = explode( '|', $value['Hint'] );
if ( count( $options ) > 3 )
{
?>
<select name="newConfig[<?php echo $name ?>]"<?php echo $canEdit?'':' disabled="disabled"' ?>>
<select class="form-control" name="newConfig[<?php echo $name ?>]"<?php echo $canEdit?'':' disabled="disabled"' ?>>
<?php
foreach ( $options as $option )
{
@ -320,51 +308,53 @@ elseif ( $tab == "users" )
$optionLabel = $optionValue = $option;
}
?>
<span><input type="radio" id="<?php echo $name.'_'.preg_replace( '/[^a-zA-Z0-9]/', '', $optionValue ) ?>" name="newConfig[<?php echo $name ?>]" value="<?php echo $optionValue ?>"<?php if ( $value['Value'] == $optionValue ) { ?> checked="checked"<?php } ?><?php echo $canEdit?'':' disabled="disabled"' ?>/>&nbsp;<?php echo htmlspecialchars($optionLabel) ?></span>
<label>
<input type="radio" id="<?php echo $name.'_'.preg_replace( '/[^a-zA-Z0-9]/', '', $optionValue ) ?>" name="newConfig[<?php echo $name ?>]" value="<?php echo $optionValue ?>"<?php if ( $value['Value'] == $optionValue ) { ?> checked="checked"<?php } ?><?php echo $canEdit?'':' disabled="disabled"' ?>/>
<?php echo htmlspecialchars($optionLabel) ?>
</label>
<?php
}
}
?>
</td>
<?php
}
elseif ( $value['Type'] == "text" )
{
?>
<td><textarea id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" rows="5" cols="40"<?php echo $canEdit?'':' disabled="disabled"' ?>><?php echo validHtmlStr($value['Value']) ?></textarea></td>
<textarea class="form-control" id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" rows="5" cols="40"<?php echo $canEdit?'':' disabled="disabled"' ?>><?php echo validHtmlStr($value['Value']) ?></textarea>
<?php
}
elseif ( $value['Type'] == "integer" )
{
?>
<td><input type="text" id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" value="<?php echo validHtmlStr($value['Value']) ?>" class="small"<?php echo $canEdit?'':' disabled="disabled"' ?>/></td>
<input type="number" class="form-control" id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" value="<?php echo validHtmlStr($value['Value']) ?>" class="small"<?php echo $canEdit?'':' disabled="disabled"' ?>/>
<?php
}
elseif ( $value['Type'] == "hexadecimal" )
{
?>
<td><input type="text" id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" value="<?php echo validHtmlStr($value['Value']) ?>" class="medium"<?php echo $canEdit?'':' disabled="disabled"' ?>/></td>
<input type="text" class="form-control" id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" value="<?php echo validHtmlStr($value['Value']) ?>" class="medium"<?php echo $canEdit?'':' disabled="disabled"' ?>/>
<?php
}
elseif ( $value['Type'] == "decimal" )
{
?>
<td><input type="text" id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" value="<?php echo validHtmlStr($value['Value']) ?>" class="small"<?php echo $canEdit?'':' disabled="disabled"' ?>/></td>
<input type="text" class="form-control" id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" value="<?php echo validHtmlStr($value['Value']) ?>" class="small"<?php echo $canEdit?'':' disabled="disabled"' ?>/>
<?php
}
else
{
?>
<td><input type="text" id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" value="<?php echo validHtmlStr($value['Value']) ?>" class="large"<?php echo $canEdit?'':' disabled="disabled"' ?>/></td>
<input type="text" class="form-control" id="<?php echo $name ?>" name="newConfig[<?php echo $name ?>]" value="<?php echo validHtmlStr($value['Value']) ?>" class="large"<?php echo $canEdit?'':' disabled="disabled"' ?>/>
<?php
}
?>
</tr>
<span class="help-block"><?php echo validHtmlStr($optionPromptText) ?>&nbsp;(<?php echo makePopupLink( '?view=optionhelp&amp;option='.$name, 'zmOptionHelp', 'optionhelp', '?' ) ?>)</span>
</div><!-- End .col-sm-9 -->
</div><!-- End .form-group -->
<?php
}
?>
</tbody>
</table>
<div id="contentButtons">
<input type="submit" class="btn btn-primary btn-lg" value="<?php echo translate('Save') ?>"<?php echo $canEdit?'':' disabled="disabled"' ?>/>
</div>