responsive design

This commit is contained in:
Roland Gruber 2017-11-12 11:45:36 +01:00
parent 213c973dd9
commit 7146be7ecf
3 changed files with 63 additions and 67 deletions

View File

@ -4013,21 +4013,16 @@ class htmlResponsiveInputCheckbox extends htmlInputCheckbox {
// label text // label text
$labelGroup = new htmlGroup(); $labelGroup = new htmlGroup();
$labelGroup->addElement(new htmlOutputText($this->label)); $labelGroup->addElement(new htmlOutputText($this->label));
if (!empty($this->helpID)) { $row->add($labelGroup, 6, 6, 6, 'responsiveLabel');
$helpLinkLabel = new htmlHelpLink($this->helpID);
$helpLinkLabel->setCSSClasses(array('hide-on-tablet', 'margin-left5'));
$labelGroup->addElement($helpLinkLabel);
}
$row->add($labelGroup, 12, 6, 6, 'responsiveLabel');
// input field // input field
$fieldGroup = new htmlGroup(); $fieldGroup = new htmlGroup();
$fieldGroup->addElement($this); $fieldGroup->addElement($this);
if (!empty($this->helpID)) { if (!empty($this->helpID)) {
$helpLink = new htmlHelpLink($this->helpID); $helpLink = new htmlHelpLink($this->helpID);
$helpLink->setCSSClasses(array('hide-on-mobile', 'margin-left5')); $helpLink->setCSSClasses(array('margin-left5 align-unset-img'));
$fieldGroup->addElement($helpLink); $fieldGroup->addElement($helpLink);
} }
$row->add($fieldGroup, 12, 6, 6, 'responsiveField nowrap'); $row->add($fieldGroup, 6, 6, 6, 'responsiveField nowrap');
return $row->generateHTML($module, $input, $values, $restricted, $tabindex, $scope); return $row->generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
} }

View File

@ -189,6 +189,10 @@ input {
vertical-align: top; vertical-align: top;
} }
.align-unset-img img {
vertical-align: unset;
}
table.lamHeader { table.lamHeader {
background-image: url(lam-images/headerLine.png); background-image: url(lam-images/headerLine.png);
padding: 0px; padding: 0px;
@ -420,12 +424,6 @@ td.loginRightBox {
max-width: 580px; max-width: 580px;
} }
.size16 {
height: 16px;
width: 16px;
max-width: 16px;
}
div.centeredTable { div.centeredTable {
display: table; display: table;
width: 100%; width: 100%;
@ -569,7 +567,7 @@ p.statusText {
} }
input.smallImageButton { input.smallImageButton {
background-position: 2px center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
height:24px; height:24px;
border: 0px; border: 0px;
@ -577,6 +575,12 @@ input.smallImageButton {
cursor:pointer; cursor:pointer;
} }
.size16 {
height: 16px !important;
width: 16px !important;
max-width: 16px;
}
/* help tooltip */ /* help tooltip */
th.help { th.help {
text-align: left; text-align: left;

View File

@ -6,11 +6,12 @@ use \htmlImage;
use \htmlOutputText; use \htmlOutputText;
use \htmlSpacer; use \htmlSpacer;
use \htmlButton; use \htmlButton;
use \htmlElement;
use \htmlGroup; use \htmlGroup;
use \htmlTableExtendedInputField; use \htmlResponsiveInputCheckbox;
use \LAMConfig; use \LAMConfig;
use \htmlTableExtendedInputCheckbox; use \htmlTableExtendedInputCheckbox;
use \htmlResponsiveRow;
use \htmlResponsiveInputField;
/* /*
This code is part of LDAP Account Manager (http://www.ldap-account-manager.org/) This code is part of LDAP Account Manager (http://www.ldap-account-manager.org/)
Copyright (C) 2004 - 2017 Roland Gruber Copyright (C) 2004 - 2017 Roland Gruber
@ -148,52 +149,58 @@ echo ("<form action=\"conftypes.php\" method=\"post\">\n");
printConfigurationPageTabs(ConfigurationPageTab::TYPES); printConfigurationPageTabs(ConfigurationPageTab::TYPES);
$container = new htmlTable(); $tabindex = 1;
$row = new htmlResponsiveRow();
// show available types // show available types
if (sizeof($availableScopes) > 0) { if (sizeof($availableScopes) > 0) {
$container->addElement(new htmlSubTitle(_("Available account types")), true); $row->add(new htmlSubTitle(_("Available account types")), 12);
$availableContainer = new htmlTable();
foreach ($availableScopes as $availableScope) { foreach ($availableScopes as $availableScope) {
$availableContainer->addElement(new htmlImage('../../graphics/' . $availableScope->getIcon())); $availableLabelGroup = new htmlGroup();
$availableContainer->addElement(new htmlOutputText($availableScope->getAlias())); $availableLabelGroup->addElement(new htmlImage('../../graphics/' . $availableScope->getIcon()));
$availableContainer->addElement(new htmlSpacer('10px', null)); $availableLabelGroup->addElement(new htmlSpacer('0.5rem', null));
$availableContainer->addElement(new htmlOutputText($availableScope->getDescription())); $availableLabelGroup->addElement(new htmlOutputText($availableScope->getAlias()));
$row->addField($availableLabelGroup);
$availableDescriptionRow = new htmlResponsiveRow();
$availableDescriptionRow->add(new htmlOutputText($availableScope->getDescription()), 10, 10, 10, 'responsiveField');
$button = new htmlButton('add_' . $availableScope->getScope(), 'add.png', true); $button = new htmlButton('add_' . $availableScope->getScope(), 'add.png', true);
$button->setTitle(_("Add")); $button->setTitle(_("Add"));
$availableContainer->addElement($button, true); $button->setCSSClasses(array('size16'));
$availableDescriptionRow->add($button, 2, 2, 2, 'responsiveField');
$row->addField($availableDescriptionRow);
$row->addVerticalSpacer('1rem');
} }
$availableContainer->addElement(new htmlSpacer(null, '20px'), true); $row->addVerticalSpacer('2rem');
$container->addElement($availableContainer, true);
} }
parseHtml(null, $row, array(), false, $tabindex, 'user');
$container = new htmlResponsiveRow();
$_SESSION['conftypes_optionTypes'] = array(); $_SESSION['conftypes_optionTypes'] = array();
// show active types // show active types
if (sizeof($activeTypes) > 0) { if (sizeof($activeTypes) > 0) {
$container->addElement(new htmlSubTitle(_("Active account types")), true); $container->add(new htmlSubTitle(_("Active account types")), 12);
$activeContainer = new htmlTable();
foreach ($activeTypes as $activeType) { foreach ($activeTypes as $activeType) {
// title // title
$titleGroup = new htmlGroup(); $titleGroup = new htmlGroup();
$titleGroup->colspan = 6;
$titleGroup->addElement(new htmlImage('../../graphics/' . $activeType->getIcon())); $titleGroup->addElement(new htmlImage('../../graphics/' . $activeType->getIcon()));
$titleGroup->addElement(new htmlSpacer('0.5rem', null));
$titleText = new htmlOutputText($activeType->getAlias()); $titleText = new htmlOutputText($activeType->getAlias());
$titleText->setIsBold(true); $titleText->setIsBold(true);
$titleGroup->addElement($titleText); $titleGroup->addElement($titleText);
$titleGroup->addElement(new htmlSpacer('10px', null)); $container->addField($titleGroup);
$titleGroup->addElement(new htmlOutputText($activeType->getBaseType()->getDescription())); $descriptionRow = new htmlResponsiveRow();
$activeContainer->addElement($titleGroup); $descriptionRow->add(new htmlOutputText($activeType->getBaseType()->getDescription()), 10, 10, 10, 'responsiveField');
// delete button // delete button
$delButton = new htmlButton('rem_'. $activeType->getId(), 'del.png', true); $delButton = new htmlButton('rem_'. $activeType->getId(), 'del.png', true);
$delButton->alignment = htmlElement::ALIGN_RIGHT;
$delButton->setTitle(_("Remove this account type")); $delButton->setTitle(_("Remove this account type"));
$activeContainer->addElement($delButton, true); //del.png $delButton->setCSSClasses(array('size16'));
$activeContainer->addElement(new htmlSpacer(null, '5px'), true); $descriptionRow->add($delButton, 2, 2, 2, 'responsiveLabel');
$container->addField($descriptionRow);
$container->addVerticalSpacer('0.5rem');
// LDAP suffix // LDAP suffix
$suffixInput = new htmlTableExtendedInputField(_("LDAP suffix"), 'suffix_' . $activeType->getId(), $typeSettings['suffix_' . $activeType->getId()], '202'); $suffixInput = new htmlResponsiveInputField(_("LDAP suffix"), 'suffix_' . $activeType->getId(), $typeSettings['suffix_' . $activeType->getId()], '202');
$suffixInput->setFieldSize(40); $container->add($suffixInput, 12);
$activeContainer->addElement($suffixInput);
$activeContainer->addElement(new htmlSpacer('20px', null));
// list attributes // list attributes
if (isset($typeSettings['attr_' . $activeType->getId()])) { if (isset($typeSettings['attr_' . $activeType->getId()])) {
$attributes = $typeSettings['attr_' . $activeType->getId()]; $attributes = $typeSettings['attr_' . $activeType->getId()];
@ -201,32 +208,28 @@ if (sizeof($activeTypes) > 0) {
else { else {
$attributes = $activeType->getBaseType()->getDefaultListAttributes(); $attributes = $activeType->getBaseType()->getDefaultListAttributes();
} }
$attrsInput = new htmlTableExtendedInputField(_("List attributes"), 'attr_' . $activeType->getId(), $attributes, '206'); $attrsInput = new htmlResponsiveInputField(_("List attributes"), 'attr_' . $activeType->getId(), $attributes, '206');
$attrsInput->setFieldSize(40);
$attrsInput->setFieldMaxLength(1000); $attrsInput->setFieldMaxLength(1000);
$activeContainer->addElement($attrsInput, true); $container->add($attrsInput, 12);
// custom label // custom label
$customLabel = ''; $customLabel = '';
if (isset($typeSettings['customLabel_' . $activeType->getId()])) { if (isset($typeSettings['customLabel_' . $activeType->getId()])) {
$customLabel = $typeSettings['customLabel_' . $activeType->getId()]; $customLabel = $typeSettings['customLabel_' . $activeType->getId()];
} }
$customLabelInput = new htmlTableExtendedInputField(_('Custom label'), 'customLabel_' . $activeType->getId(), $customLabel, '264'); $customLabelInput = new htmlResponsiveInputField(_('Custom label'), 'customLabel_' . $activeType->getId(), $customLabel, '264');
$customLabelInput->setFieldSize(40); $container->add($customLabelInput, 12);
$activeContainer->addElement($customLabelInput);
$activeContainer->addElement(new htmlSpacer('20px', null));
// LDAP filter // LDAP filter
$filter = ''; $filter = '';
if (isset($typeSettings['filter_' . $activeType->getId()])) { if (isset($typeSettings['filter_' . $activeType->getId()])) {
$filter = $typeSettings['filter_' . $activeType->getId()]; $filter = $typeSettings['filter_' . $activeType->getId()];
} }
$filterInput = new htmlTableExtendedInputField(_("Additional LDAP filter"), 'filter_' . $activeType->getId(), $filter, '260'); $filterInput = new htmlResponsiveInputField(_("Additional LDAP filter"), 'filter_' . $activeType->getId(), $filter, '260');
$filterInput->setFieldSize(40); $container->add($filterInput, 12);
$activeContainer->addElement($filterInput, true);
// type options // type options
$typeConfigOptions = $activeType->getBaseType()->get_configOptions(); $typeConfigOptions = $activeType->getBaseType()->get_configOptions();
if (!empty($typeConfigOptions)) { if (!empty($typeConfigOptions)) {
foreach ($typeConfigOptions as $typeConfigOption) { foreach ($typeConfigOptions as $typeConfigOption) {
$activeContainer->addElement($typeConfigOption, true); $container->add($typeConfigOption, 12);
} }
// save option types to session // save option types to session
ob_start(); ob_start();
@ -236,49 +239,43 @@ if (sizeof($activeTypes) > 0) {
$_SESSION['conftypes_optionTypes'] = array_merge($_SESSION['conftypes_optionTypes'], $typeConfigOptionTypes); $_SESSION['conftypes_optionTypes'] = array_merge($_SESSION['conftypes_optionTypes'], $typeConfigOptionTypes);
} }
// advanced options // advanced options
$advancedOptions = new htmlTable(); $advancedOptions = new htmlResponsiveRow();
$advancedOptions->colspan = 30;
// read-only // read-only
if (isLAMProVersion() && ($conf->getAccessLevel() == LAMConfig::ACCESS_ALL)) { if (isLAMProVersion() && ($conf->getAccessLevel() == LAMConfig::ACCESS_ALL)) {
$isReadOnly = false; $isReadOnly = false;
if (isset($typeSettings['readOnly_' . $activeType->getId()])) { if (isset($typeSettings['readOnly_' . $activeType->getId()])) {
$isReadOnly = $typeSettings['readOnly_' . $activeType->getId()]; $isReadOnly = $typeSettings['readOnly_' . $activeType->getId()];
} }
$readOnly = new htmlTableExtendedInputCheckbox('readOnly_' . $activeType->getId(), $isReadOnly, _('Read-only'), '265'); $readOnly = new htmlResponsiveInputCheckbox('readOnly_' . $activeType->getId(), $isReadOnly, _('Read-only'), '265');
$readOnly->setElementsToDisable(array('hideNewButton_' . $activeType->getId(), 'hideDeleteButton_' . $activeType->getId())); $readOnly->setElementsToDisable(array('hideNewButton_' . $activeType->getId(), 'hideDeleteButton_' . $activeType->getId()));
$advancedOptions->addElement($readOnly); $advancedOptions->add($readOnly, 12);
$advancedOptions->addElement(new htmlSpacer('20px', null));
} }
// hidden type // hidden type
$hidden = false; $hidden = false;
if (isset($typeSettings['hidden_' . $activeType->getId()])) { if (isset($typeSettings['hidden_' . $activeType->getId()])) {
$hidden = $typeSettings['hidden_' . $activeType->getId()]; $hidden = $typeSettings['hidden_' . $activeType->getId()];
} }
$advancedOptions->addElement(new htmlTableExtendedInputCheckbox('hidden_' . $activeType->getId(), $hidden, _('Hidden'), '261')); $advancedOptions->add(new htmlResponsiveInputCheckbox('hidden_' . $activeType->getId(), $hidden, _('Hidden'), '261'), 12);
if (isLAMProVersion() && ($conf->getAccessLevel() == LAMConfig::ACCESS_ALL)) { if (isLAMProVersion() && ($conf->getAccessLevel() == LAMConfig::ACCESS_ALL)) {
$advancedOptions->addElement(new htmlSpacer('20px', null));
// hide button to create new accounts // hide button to create new accounts
$hideNewButton = false; $hideNewButton = false;
if (isset($typeSettings['hideNewButton_' . $activeType->getId()])) { if (isset($typeSettings['hideNewButton_' . $activeType->getId()])) {
$hideNewButton = $typeSettings['hideNewButton_' . $activeType->getId()]; $hideNewButton = $typeSettings['hideNewButton_' . $activeType->getId()];
} }
$advancedOptions->addElement(new htmlTableExtendedInputCheckbox('hideNewButton_' . $activeType->getId(), $hideNewButton, _('No new entries'), '262')); $advancedOptions->add(new htmlResponsiveInputCheckbox('hideNewButton_' . $activeType->getId(), $hideNewButton, _('No new entries'), '262'), 12);
$advancedOptions->addElement(new htmlSpacer('20px', null));
// hide button to delete accounts // hide button to delete accounts
$hideDeleteButton = false; $hideDeleteButton = false;
if (isset($typeSettings['hideDeleteButton_' . $activeType->getId()])) { if (isset($typeSettings['hideDeleteButton_' . $activeType->getId()])) {
$hideDeleteButton = $typeSettings['hideDeleteButton_' . $activeType->getId()]; $hideDeleteButton = $typeSettings['hideDeleteButton_' . $activeType->getId()];
} }
$advancedOptions->addElement(new htmlTableExtendedInputCheckbox('hideDeleteButton_' . $activeType->getId(), $hideDeleteButton, _('Disallow delete'), '263'), true); $advancedOptions->add(new htmlResponsiveInputCheckbox('hideDeleteButton_' . $activeType->getId(), $hideDeleteButton, _('Disallow delete'), '263'), 12);
} }
$activeContainer->addElement($advancedOptions, true); $container->add($advancedOptions, 12);
$activeContainer->addElement(new htmlSpacer(null, '40px'), true); $container->addVerticalSpacer('2rem');
} }
$container->addElement($activeContainer, true);
} }
$tabindex = 1;
$dynamicTypeOptions = array(); $dynamicTypeOptions = array();
foreach ($_SESSION['conftypes_optionTypes'] as $key => $value) { foreach ($_SESSION['conftypes_optionTypes'] as $key => $value) {
if (isset($typeSettings[$key])) { if (isset($typeSettings[$key])) {
@ -287,10 +284,10 @@ foreach ($_SESSION['conftypes_optionTypes'] as $key => $value) {
} }
parseHtml(null, $container, $dynamicTypeOptions, false, $tabindex, 'user'); parseHtml(null, $container, $dynamicTypeOptions, false, $tabindex, 'user');
echo "<input type=\"hidden\" name=\"postAvailable\" value=\"yes\">\n";
echo "</div></div>"; echo "</div></div>";
echo "<input type=\"hidden\" name=\"postAvailable\" value=\"yes\">\n";
$buttonContainer = new htmlTable(); $buttonContainer = new htmlTable();
$buttonContainer->addElement(new htmlSpacer(null, '10px'), true); $buttonContainer->addElement(new htmlSpacer(null, '10px'), true);
$saveButton = new htmlButton('saveSettings', _('Save')); $saveButton = new htmlButton('saveSettings', _('Save'));