Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 445786b

Browse files
committed
Stilizirovana knopka zagruzki izobrazheniia s komp'iutera, close #12
1 parent 0bf900e commit 445786b

File tree

7 files changed

+86
-13
lines changed
  • _locales
    • en
      • messages.json
    • ru
      • messages.json
  • folder-form.css
  • mlsd.html
  • mlsd.js
  • options.html
  • options.js

7 files changed

+86
-13
lines changed

_locales/en/messages.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,5 +322,15 @@
322322
"ohnonono":
323323
{
324324
"message": "Oh no no no"
325+
},
326+
327+
"browse":
328+
{
329+
"message": "Browse..."
330+
},
331+
332+
"noFileChosen":
333+
{
334+
"message": "No file chosen"
325335
}
326336
}

_locales/ru/messages.json

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@
166166

167167
"kbdNavHints":
168168
{
169-
"message": "0-9 - nabor adresa\n+ ili - - perebor elementov\n/ ili probel - razdelitel'\nBackspace - steret'\nShift - otkryt' v novoi vkladke"
169+
"message": "0-9 - nabor adresa\n+ ili - - perebor elementov\n/ ili PROBEL - razdelitel'\nBackspace - steret'\nShift - otkryt' v novoi vkladke"
170170
},
171171

172172
"rootFolderSettings":
@@ -322,5 +322,15 @@
322322
"ohnonono":
323323
{
324324
"message": "Ai-iai-iai"
325+
},
326+
327+
"browse":
328+
{
329+
"message": "Obzor..."
330+
},
331+
332+
"noFileChosen":
333+
{
334+
"message": "Fail ne vybran"
325335
}
326336
}

folder-form.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,32 @@ input[type='number'] {
4444
margin-top: 3px;
4545
margin-left: 2px;
4646
}
47+
48+
#bgimgPicker {
49+
display: none;
50+
}
51+
52+
#fakeBgimgPicker {
53+
display: inline-block;
54+
height: 24px;
55+
}
56+
57+
#fakeBgimgPickerBtn {
58+
min-width: 80px;
59+
width: 80px;
60+
height: 24px;
61+
}
62+
63+
#fakeBgimgPickerLabel {
64+
font-size: 12px;
65+
padding-right: 2px;
66+
}
67+
68+
#fakeBgimgPickerBtn:disabled+#fakeBgimgPickerLabel {
69+
opacity: 0.4;
70+
}
71+
72+
#bgimgPicker:invalid+#fakeBgimgPicker {
73+
border-radius: 2px;
74+
box-shadow: 0 0 2px 1px red/*var(--red-60)*/;
75+
}

mlsd.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@
6767
<input type="color" id="bgcolorPicker" name="bgcolor" value="#F9F9FA" disabled>
6868
<br><label id="imgLocalBgLabel" class="doLeading"><input type="radio" id="imgLocalBgRb" name="bgtype" value="IMAGE_LOCAL">label>
6969
<input type="file" id="bgimgPicker" name="bgimgLocal" accept="image/*" required disabled>
70+
<span id="fakeBgimgPicker">
71+
<input id="fakeBgimgPickerBtn" type="button">
72+
<label id="fakeBgimgPickerLabel" for="fakeBgimgPickerBtn">label>
73+
span>
7074
<img id="imgLocalBgSpinner" src="icons/tail-spin.svg">
7175
<br><label id="imgRemoteBgLabel" class="doLeading"><input type="radio" id="imgRemoteBgRb" name="bgtype" value="IMAGE_REMOTE">label>
7276
<input type="url" id="bgimgUrlTf" name="bgimgRemote" size="80" required pattern=".*\.+(png|jpg|jpeg|PNG|JPG|JPEG)" disabled>

mlsd.js

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -167,21 +167,33 @@ export function initFolderForm(folder) {
167167
document.getElementById("defaultBgLabel").innerHTML += browser.i18n.getMessage("default");
168168
document.getElementById("colorBgLabel").innerHTML += browser.i18n.getMessage("color") + ": ";
169169
document.getElementById("imgLocalBgLabel").innerHTML += browser.i18n.getMessage("imageLocal") + ": ";
170+
document.getElementById("fakeBgimgPickerBtn").value = browser.i18n.getMessage("browse");
171+
document.getElementById("fakeBgimgPickerLabel").textContent = browser.i18n.getMessage("nofilechosen");
170172
document.getElementById("imgRemoteBgLabel").innerHTML += browser.i18n.getMessage("imageRemote") + ": ";
171173

172174
let onBgtypeChanged = function () {
173-
document.getElementById("bgcolorPicker").disabled =
174-
!document.getElementById("colorBgRb").checked;
175-
document.getElementById("bgimgPicker").disabled =
176-
!document.getElementById("imgLocalBgRb").checked;
177-
document.getElementById("bgimgUrlTf").disabled =
178-
!document.getElementById("imgRemoteBgRb").checked;
175+
document.getElementById("bgcolorPicker").disabled = !document.getElementById("colorBgRb").checked;
176+
document.getElementById("bgimgPicker").disabled = !document.getElementById("imgLocalBgRb").checked;
177+
document.getElementById("fakeBgimgPickerBtn").disabled = !document.getElementById("imgLocalBgRb").checked;
178+
document.getElementById("bgimgUrlTf").disabled = !document.getElementById("imgRemoteBgRb").checked;
179179
}
180180
let bufControls = document.getElementsByName("bgtype");
181181
bufControls.forEach(function(item) {
182182
item.oninput = onBgtypeChanged;
183183
});
184184

185+
let bgimgPicker = document.getElementById("bgimgPicker");
186+
document.getElementById("fakeBgimgPickerBtn").onclick = function() {
187+
bgimgPicker.click();
188+
};
189+
bgimgPicker.onchange = function() {
190+
if (bgimgPicker.files.length > 0) {
191+
document.getElementById("fakeBgimgPickerLabel").textContent = bgimgPicker.files[0].name;
192+
} else {
193+
document.getElementById("fakeBgimgPickerLabel").textContent = browser.i18n.getMessage("nofilechosen");
194+
}
195+
}
196+
185197
let onGridSizeChanged = function () {
186198
const oldAmount = document.getElementById("rowsOld").value *
187199
document.getElementById("colsOld").value;
@@ -449,6 +461,7 @@ export function showAssignmentForm(element, mode) {
449461
document.getElementById("elemsWillBeLostLabel").textContent = "";
450462
document.getElementById("elemsWillBeLostLabel").style.display = "none";
451463
document.getElementById("imgLocalBgSpinner").style.display = "none";
464+
document.getElementById("fakeBgimgPickerLabel").textContent = browser.i18n.getMessage("nofilechosen");
452465

453466
if (mode == AssignmentMode.CREATE) {
454467
document.getElementById("modeTf").value = AssignmentMode.CREATE;
@@ -458,6 +471,7 @@ export function showAssignmentForm(element, mode) {
458471
document.getElementById("defaultBgRb").checked = true;
459472
document.getElementById("bgcolorPicker").disabled = true;
460473
document.getElementById("bgimgPicker").disabled = true;
474+
document.getElementById("fakeBgimgPickerBtn").disabled = true;
461475
document.getElementById("bgimgUrlTf").disabled = true;
462476
}
463477
else if (mode == AssignmentMode.EDIT) {
@@ -469,6 +483,7 @@ export function showAssignmentForm(element, mode) {
469483
document.getElementById("defaultBgRb").checked = true;
470484
document.getElementById("bgcolorPicker").disabled = !(document.getElementById("colorBgRb").checked = false);
471485
document.getElementById("bgimgPicker").disabled = !(document.getElementById("imgLocalBgRb").checked = false);
486+
document.getElementById("fakeBgimgPickerBtn").disabled = !(document.getElementById("imgLocalBgRb").checked = false);
472487
document.getElementById("bgimgUrlTf").disabled = !(document.getElementById("imgRemoteBgRb").checked = false);
473488
}
474489
else if (element.type == ElementType.FOLDER) {
@@ -480,6 +495,7 @@ export function showAssignmentForm(element, mode) {
480495
document.getElementById("defaultBgRb").checked = element.bgtype == BgType.DEFAULT;
481496
document.getElementById("bgcolorPicker").disabled = !(document.getElementById("colorBgRb").checked = element.bgtype == BgType.SOLID);
482497
document.getElementById("bgimgPicker").disabled = !(document.getElementById("imgLocalBgRb").checked = element.bgtype == BgType.IMAGE_LOCAL);
498+
document.getElementById("fakeBgimgPickerBtn").disabled = !(document.getElementById("imgLocalBgRb").checked = element.bgtype == BgType.IMAGE_LOCAL);
483499
document.getElementById("bgimgUrlTf").disabled = !(document.getElementById("imgRemoteBgRb").checked = element.bgtype == BgType.IMAGE_REMOTE);
484500
switch (element.bgtype) {
485501
case (BgType.SOLID):
@@ -490,10 +506,9 @@ export function showAssignmentForm(element, mode) {
490506
document.getElementById("bgimgPicker").required = true;
491507
document.getElementById("bgimgBase64").value = "";
492508
} else {
493-
//TODO: otobrazit' imia faila, esli on byl ukazan ranee https://stackoverflow.com/a/17949302
494-
//document.getElementById("bgimgPicker").value = element.bgviewstr; //SecurityError: The operation is insecure
495509
document.getElementById("bgimgPicker").required = false;
496510
document.getElementById("bgimgBase64").value = element.bgdata;
511+
document.getElementById("fakeBgimgPickerLabel").textContent = element.bgviewstr;
497512
}
498513
break;
499514
case (BgType.IMAGE_REMOTE):
@@ -616,7 +631,7 @@ async function parseAssignmentForm(copyElems) {
616631
bgviewstr = picker.files[0].name;
617632
} else {
618633
bgdata = document.getElementById("bgimgBase64").value;
619-
bgviewstr = "Kakoi-to fail.zhypeg";
634+
bgviewstr = document.getElementById("fakeBgimgPickerLabel").textContent;
620635
}
621636
}
622637
else if (document.getElementById("imgRemoteBgRb").checked) {

options.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@
4343
<input type="color" id="bgcolorPicker" name="bgcolor" value="#F9F9FA" disabled>
4444
<br><label id="imgLocalBgLabel" class="doLeading"><input type="radio" id="imgLocalBgRb" name="bgtype" value="IMAGE_LOCAL">label>
4545
<input type="file" id="bgimgPicker" name="bgimgLocal" accept="image/*" required disabled>
46+
<span id="fakeBgimgPicker">
47+
<input id="fakeBgimgPickerBtn" type="button">
48+
<label id="fakeBgimgPickerLabel" for="fakeBgimgPickerBtn">label>
49+
span>
4650
<img id="imgLocalBgSpinner" src="icons/tail-spin.svg">
4751
<br><label id="imgRemoteBgLabel" class="doLeading"><input type="radio" id="imgRemoteBgRb" name="bgtype" value="IMAGE_REMOTE">label>
4852
<input type="url" id="bgimgUrlTf" name="bgimgRemote" size="80" required pattern=".*\.+(png|jpg|jpeg|PNG|JPG|JPEG)" disabled>

options.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,7 @@ function refillRootFolderForm() {
265265
document.getElementById("elemsWillBeLostLabel").textContent = "";
266266
document.getElementById("elemsWillBeLostLabel").style.display = "none";
267267
document.getElementById("imgLocalBgSpinner").style.display = "none";
268+
document.getElementById("fakeBgimgPickerLabel").textContent = browser.i18n.getMessage("nofilechosen");
268269

269270
document.getElementById("rowsSpin").value = rootFolder.rows;
270271
document.getElementById("colsSpin").value = rootFolder.cols;
@@ -273,6 +274,7 @@ function refillRootFolderForm() {
273274
document.getElementById("defaultBgRb").checked = rootFolder.bgtype == BgType.DEFAULT;
274275
document.getElementById("bgcolorPicker").disabled = !(document.getElementById("colorBgRb").checked = rootFolder.bgtype == BgType.SOLID);
275276
document.getElementById("bgimgPicker").disabled = !(document.getElementById("imgLocalBgRb").checked = rootFolder.bgtype == BgType.IMAGE_LOCAL);
277+
document.getElementById("fakeBgimgPickerBtn").disabled = !(document.getElementById("imgLocalBgRb").checked = rootFolder.bgtype == BgType.IMAGE_LOCAL);
276278
document.getElementById("bgimgUrlTf").disabled = !(document.getElementById("imgRemoteBgRb").checked = rootFolder.bgtype == BgType.IMAGE_REMOTE);
277279
switch (rootFolder.bgtype) {
278280
case (BgType.SOLID):
@@ -283,10 +285,9 @@ function refillRootFolderForm() {
283285
document.getElementById("bgimgPicker").required = true;
284286
document.getElementById("bgimgBase64").value = "";
285287
} else {
286-
//TODO: otobrazit' imia faila, esli on byl ukazan ranee https://stackoverflow.com/a/17949302
287-
//document.getElementById("bgimgPicker").value = rootFolder.bgviewstr; //SecurityError: The operation is insecure
288288
document.getElementById("bgimgPicker").required = false;
289289
document.getElementById("bgimgBase64").value = rootFolder.bgdata;
290+
document.getElementById("fakeBgimgPickerLabel").textContent = rootFolder.bgviewstr;
290291
}
291292
break;
292293
case (BgType.IMAGE_REMOTE):
@@ -353,7 +354,7 @@ async function saveFolderSettings() {
353354
bgviewstr = picker.files[0].name;
354355
} else {
355356
bgdata = document.getElementById("bgimgBase64").value;
356-
bgviewstr = "Kakoi-to fail.zhypeg";
357+
bgviewstr = document.getElementById("fakeBgimgPickerLabel").textContent;
357358
}
358359
}
359360
else if (document.getElementById("imgRemoteBgRb").checked) {

0 commit comments

Comments
(0)