A Pen by Tomáš Tintěra.

Edit-selectbox.markdown

Edit selectbox

Editace položek selectboxu/radiobuttonu Cíle:

• copy/paste z Execelu a dalších programů
• přímočarý export do CAT nástrojů

A Pen by Tomáš Tintěra on CodePen.

License.

index.html

<div style="background-color: silver; padding: 0.25em 1em; margin-bottom: 2em;">
<h2>Administrace: editace obsahu selectboxu/multiselectu/sady radio-buttonů.</h2>
Interní poznámky k postupu implementace
<ul>
  <li><b>Grafička</b> provede následně úpravy: ikony,, barvy, drobné změny velikosti a rozestupů, fonty a podobně.</li>
  <li><b>Programátoři:</b></li>
  <li>Převzetí vlastností kvalitníh editoru (Vzor: Notepad++)</li>
  <li>Pokud se řádek s hodnotou zalomí, je třeba stejně posunout i čísla řádků. (Vzor: Notepad++)</li>
  <li>Aktuálně editovaný řádek bude podbarven. A to ve všech jazycích najednou.</li>
  <li>CTRL+G nabídne zadání číxsla řádku.</li>
  <li>Všechna pole scrollují synchronně.</li>
  <li>+ přidává zobrazení dalšího překladu. Nezobrazuje se, když už není co přidávat. Přidání zobrazí první volný jazyk v seznamu.</li>
  <li>- odebírá zobrazení daného překladu.</li>
</ul>
</div>

<div class="listValues">
  <div class="labelInternal listboxToolbar" style="text-align:right"><span>interní pojmenování</span></div>
  <input value="akceptace" class="translatedName" >
  <textarea class="linenumbers">
1
2
3
4
  </textarea><textarea class="contentList">
nezadáno
souhlas
reklamace
# odklad
    </textarea>
</div>
<div class="listValues">
  <div class="listboxToolbar">
    <select type="select" class="langList">
      <option value = "CZ" selected>CZ</option>
      <option value = "EN">EN</option>
      <option value = "DE">DE</option>
      <option value = "SK">SK</option>
    </select>
  </div>
  <input value="vaše akceptace" class="translatedName" >
    <textarea class="linenumbers">
1
2
3
4
  </textarea><textarea class="contentList">
nezadáno
ano, souhlasím
ne, reklamuji
# vypnutá položka
  </textarea>
</div>

<div class="listValues">
  <div class="listboxToolbar">
  <button type="button" class="buttonRemove">-</button>
  <select type="select">
    <option value = "CZ">CZ</option>
    <option value = "EN" selected>EN</option>
    <option value = "DE">DE</option>
    <option value = "SK">SK</option>
  </select>
  </div>
  <input value="your approval" class="translatedName" >
  <textarea class="linenumbers">
1
2
3
4
  </textarea><textarea style="height:10em; width:15em;">
select one
YES, accepted
NO, register a complaint
# dissabled entry
  </textarea>
</div>
<div style="text-align:right; float:left">
  <button type="button">+</button>
</div>

<div style="clear:both">
  <br />
  <small>
    Poznámky: 
    <ul>
      <li>Neaktivní položky = položky prefixované znakem #, jsou uživatelům skryty při zadávání nového požadavku a v editaci pole.</li>
      <li>Jazyky se nastavují hromadně pro celý TaskPool v sekci <a href="#">Jazyky</a>. Zde si můžete jednotlivé varianty selectboxu zobrazit pro kontrolu a editaci. Pro překlad také můžete použít funkci <a href="#">hromadný překlad</a>.</li>
    </ul>
  </small>
</div>

style.css

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.428571429;
  padding: 1em;
}font
h1 {
  font-family: "Calibri light", Helvetica, Arial, sans-serif;
  line-height: 1.1;
  font-weight: 500;
}

.button:nth-of-type(1) {
  display:none;
}

.buttonRemove {
  position: absolute;
  top: 0px;
  left: 16px;
}

.listboxToolbar {
  position: relative;
  border: 0px solid red;
  height: 27px;
}

.contentList {
  height:10em; width:200px;
}

.labelInternal {
  line-height:22px;
  /*border: 1px solid blue;*/
}

.langList {
  margin-right: 0px;
}

.listValues {
  margin-right: 2em;
  text-align: right;
  float:left;
  /*border: 0px solid lightblue;*/
}
.translatedName {
  margin-bottom:-1px; padding:2px; 
  display:block; 
  position:relative; left: 19px;
  width:200px; 
  border: 1px solid #000;
}

.linenumbers {
  width:15px; height:10em; border:0; background-color:silver;
  resize: none; 
  border-top:2px solid silver;
}