Add File Select widget

This commit is contained in:
Eric
2021-02-09 17:24:27 +01:00
parent 3c60e4f765
commit 9ed2127530
12 changed files with 163 additions and 3 deletions

View File

@@ -30,4 +30,5 @@
@import "formtable";
@import "formtablerow";
@import "search-form";
@import "field-badge";
@import "field-badge";
@import "file-select";

View File

@@ -0,0 +1,22 @@
/*!
* copyright Copyright (C) 2010-2020 Combodo SARL
* license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-input-file-select--file-name-margin-left: 10px !default;
.ibo-input-file-select--container {
.ibo-input-file-select {
.ibo-input-file-select--file-input {
opacity: 0;
width: 100%;
}
.ibo-input-file-select--file-name {
margin-left: $ibo-input-file-select--file-name-margin-left;
@extend %ibo-font-ral-med-150;
}
}
}

View File

@@ -431,6 +431,8 @@ Dict::Add('EN US', 'English', 'English', array(
'UI:Treeview:CollapseAll' => 'Collapse All',
'UI:Treeview:ExpandAll' => 'Expand All',
'UI:UserPref:DoNotShowAgain' => 'Do not show again',
'UI:InputFile:NoFileSelected' => 'No File Selected',
'UI:InputFile:SelectFile' => 'Select a file',
'UI:SearchToggle' => 'Search',
'UI:ClickToCreateNew' => 'Create a %1$s',

View File

@@ -412,6 +412,8 @@ Dict::Add('FR FR', 'French', 'Français', array(
'UI:Button:Wait' => 'Patientez pendant la mise à jour des champs',
'UI:Treeview:CollapseAll' => 'Tout replier',
'UI:Treeview:ExpandAll' => 'Tout déplier',
'UI:InputFile:NoFileSelected' => 'Aucun fichier sélectionné',
'UI:InputFile:SelectFile' => 'Sélectionner un fichier',
'UI:SearchToggle' => 'Recherche',
'UI:ClickToCreateNew' => 'Créer un(e) %1$s',

View File

@@ -188,6 +188,8 @@ return array(
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Html\\Html' => $baseDir . '/sources/application/UI/Base/Component/Html/Html.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Html\\HtmlFactory' => $baseDir . '/sources/application/UI/Base/Component/Html/HtmlFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\AbstractInput' => $baseDir . '/sources/application/UI/Base/Component/Input/AbstractInput.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\FileSelect\\FileSelect' => $baseDir . '/sources/application/UI/Base/Component/Input/FileSelect/FileSelect.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\FileSelect\\FileSelectUIBlockFactory' => $baseDir . '/sources/application/UI/Base/Component/Input/FileSelect/FileSelectUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\Input' => $baseDir . '/sources/application/UI/Base/Component/Input/Input.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\InputUIBlockFactory' => $baseDir . '/sources/application/UI/Base/Component/Input/InputUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\InputWithLabel' => $baseDir . '/sources/application/UI/Base/Component/Input/InputWithLabel.php',

View File

@@ -418,6 +418,8 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Html\\Html' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Html/Html.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Html\\HtmlFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Html/HtmlFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\AbstractInput' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Input/AbstractInput.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\FileSelect\\FileSelect' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Input/FileSelect/FileSelect.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\FileSelect\\FileSelectUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Input/FileSelect/FileSelectUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\Input' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Input/Input.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\InputUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Input/InputUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Input\\InputWithLabel' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Input/InputWithLabel.php',

View File

@@ -0,0 +1,83 @@
<?php
/**
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
namespace Combodo\iTop\Application\UI\Base\Component\Input\FileSelect;
use Combodo\iTop\Application\UI\Base\UIBlock;
use Dict;
class FileSelect extends UIBlock
{
// Overloaded constants
public const BLOCK_CODE = 'ibo-input-file-select';
public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/input/file-select/layout';
public const DEFAULT_JS_TEMPLATE_REL_PATH = 'base/components/input/file-select/layout';
/** @var string */
private $sName;
/** @var string */
private $sFileName;
/** @var string */
private $sButtonText;
public function __construct(string $sName, string $sId = null)
{
parent::__construct($sId);
$this->sName = $sName;
$this->sFileName = Dict::S('UI:InputFile:NoFileSelected');
$this->sButtonText = Dict::S('UI:InputFile:SelectFile');
}
/**
* @return string
*/
public function GetFileName()
{
return $this->sFileName;
}
/**
* @param mixed $sFileName
*
* @return $this
*/
public function SetFileName($sFileName)
{
$this->sFileName = $sFileName;
return $this;
}
/**
* @return string
*/
public function GetButtonText(): string
{
return $this->sButtonText;
}
/**
* @param string $sButtonText
*
* @return $this
*/
public function SetButtonText(string $sButtonText)
{
$this->sButtonText = $sButtonText;
return $this;
}
/**
* @return string
*/
public function GetName(): string
{
return $this->sName;
}
}

View File

@@ -0,0 +1,22 @@
<?php
/**
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
namespace Combodo\iTop\Application\UI\Base\Component\Input\FileSelect;
use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
class FileSelectUIBlockFactory extends AbstractUIBlockFactory
{
public const TWIG_TAG_NAME = 'UIFileSelect';
public const UI_BLOCK_CLASS_NAME = FileSelect::class;
public static function MakeStandard(string $sName, string $sId = null): FileSelect
{
return new FileSelect($sName, $sId);
}
}

View File

@@ -12,7 +12,7 @@ use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
class ToolbarSpacerUIBlockFactory extends AbstractUIBlockFactory
{
public const TWIG_TAG_NAME = 'ToolbarSpacer';
public const TWIG_TAG_NAME = 'UIToolbarSpacer';
public const UI_BLOCK_CLASS_NAME = ToolbarSpacer::class;
/**

View File

@@ -12,7 +12,7 @@ use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
class ToolbarUIBlockFactory extends AbstractUIBlockFactory
{
public const TWIG_TAG_NAME = 'Toolbar';
public const TWIG_TAG_NAME = 'UIToolbar';
public const UI_BLOCK_CLASS_NAME = Toolbar::class;
public static function MakeForAction(string $sId = null): Toolbar

View File

@@ -0,0 +1,17 @@
{# @copyright Copyright (C) 2010-2021 Combodo SARL #}
{# @license http://opensource.org/licenses/AGPL-3.0 #}
{% apply spaceless %}
<div id="{{ oUIBlock.GetId() }}-container"
class="ibo-input-file-select--container {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}
{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
<label class="ibo-input-file-select">
<input id="{{ oUIBlock.GetId() }}" class="ibo-input-file-select--file-input" type="file" name="{{ oUIBlock.GetName() }}">
<span class="ibo-button ibo-is-regular ibo-is-primary">
{{ oUIBlock.GetButtonText() }}
</span>
<span id="{{ oUIBlock.GetId() }}-file-name" class="ibo-input-file-select--file-name">
{{ oUIBlock.GetFileName() }}
</span>
</label>
</div>
{% endapply %}

View File

@@ -0,0 +1,7 @@
{# @copyright Copyright (C) 2010-2021 Combodo SARL #}
{# @license http://opensource.org/licenses/AGPL-3.0 #}
$('#{{ oUIBlock.GetId() }}').bind('change', function() {
var fileName = $(this).val().replace(/^.*[\\\/]/, '');
$('#{{ oUIBlock.GetId() }}-file-name').html(fileName);
});