Merge pull request #274 from hawkeye116477/redesign

Redesign dashboard
gorhill · Nov 7, 2020 · 9e791f6 · 9e791f6
2 parents 63aa999 + 013b64a
commit 9e791f6
Show file tree

Hide file tree

Showing 106 changed files with 3,408 additions and 834 deletions.
diff --git a/src/1p-filters.html b/src/1p-filters.html
@@ -8,6 +8,7 @@
 <link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
 <link rel="stylesheet" href="lib/codemirror/addon/search/matchesonscrollbar.css">
 
+<link rel="stylesheet" type="text/css" href="css/themes/default.css">
 <link rel="stylesheet" href="css/common.css">
 <link rel="stylesheet" href="css/dashboard-common.css">
 <link rel="stylesheet" href="css/cloud-ui.css">
@@ -22,14 +23,14 @@
 
     <p class="vverbose"><span data-i18n="1pFormatHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Static-filter-syntax" target="_blank">&#xf05a;</a></p>
     <p>
-        <button id="userFiltersApply" class="custom important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="1pApplyChanges"></span></button>
-        <button id="userFiltersRevert" class="custom iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
-        &emsp;&emsp;
-        <button id="importUserFiltersFromFile" class="custom iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="1pImport"></span></button>
-        <button id="exportUserFiltersToFile" class="custom iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
+        <button id="userFiltersApply" class="important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="1pApplyChanges"></span></button>
+        <button id="userFiltersRevert" class="iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
+        &ensp;
+        <button id="importUserFiltersFromFile" class="iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="1pImport"></span></button>
+        <button id="exportUserFiltersToFile" class="iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
     </p>
 </div>
-<div id="userFilters" class="codeMirrorContainer codeMirrorFillVertical codeMirrorBreakAll" spellcheck="false"></div>
+<div id="userFilters" class="codeMirrorContainer codeMirrorBreakAll" spellcheck="false"></div>
 <div class="hidden">
     <input id="importFilePicker" type="file" accept="text/plain">
 </div>

diff --git a/src/3p-filters.html b/src/3p-filters.html
@@ -2,9 +2,11 @@
 <html>
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
 <title>uBlock — Filter lists</title>
+<link rel="stylesheet" type="text/css" href="css/themes/default.css">
 <link rel="stylesheet" type="text/css" href="css/common.css">
+<link rel="stylesheet" type="text/css" href="css/fa-icons.css">
 <link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
 <link rel="stylesheet" type="text/css" href="css/cloud-ui.css">
 <link rel="stylesheet" type="text/css" href="css/3p-filters.css">
@@ -15,47 +17,53 @@
 <div class="body">
 
 <div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div>
-<ul id="options" class="root">
-<li><button id="buttonUpdate" class="custom important disabled" data-i18n="3pUpdateNow"></button>
-    <button id="buttonPurgeAll" class="custom disabled" data-i18n="3pPurgeAll"></button>
-    <button id="buttonApply" class="custom important disabled" data-i18n="3pApplyChanges"></button>
-<li><input type="checkbox" id="autoUpdate"><label data-i18n="3pAutoUpdatePrompt1" for="autoUpdate"></label>&ensp;
-<li><input type="checkbox" id="parseCosmeticFilters"><label data-i18n="3pParseAllABPHideFiltersPrompt1" for="parseCosmeticFilters"></label><button class="whatisthis"></button>
-    <div class="whatisthis-expandable para" data-i18n="3pParseAllABPHideFiltersInfo"></div>
-<li><input type="checkbox" id="ignoreGenericCosmeticFilters"><label data-i18n="3pIgnoreGenericCosmeticFilters" for="ignoreGenericCosmeticFilters"></label><button class="whatisthis"></button>
-    <div class="whatisthis-expandable para" data-i18n="3pIgnoreGenericCosmeticFiltersInfo"></div>
-</ul>
-<ul class="root">
-<li><span id="listsOfBlockedHostsPrompt"></span>
-    <ul id="lists"></ul>
-</ul>
+<div id="actions">
+    <button id="buttonApply" class="important disabled iconifiable" type="button" title="3pApplyChanges"><span class="fa-icon">check</span><span data-i18n="3pApplyChanges"></span></button>
+    <button id="buttonUpdate" class="important disabled iconifiable" type="button" title="3pUpdateNow"><span class="fa-icon">refresh</span><span data-i18n="3pUpdateNow"></span></button>
+    <button id="buttonPurgeAll" class="disabled iconifiable" type="button" title="3pPurgeAll"><span class="fa-icon">clock-o</span><span data-i18n="3pPurgeAll"></span></button>
+</div>
+
+<div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" id="autoUpdate"><svg><use href="img/material-design.svg#checkmark" /></svg></span><span data-i18n="3pAutoUpdatePrompt1"></span></label></div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" id="parseCosmeticFilters"><svg><use href="img/material-design.svg#checkmark" /></svg></span><span><span data-i18n="3pParseAllABPHideFiltersPrompt1"></span>&nbsp;<span class="fa-icon info" title="3pParseAllABPHideFiltersInfo">question-circle</span></span></label>
+    </div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" id="ignoreGenericCosmeticFilters"><svg><use href="img/material-design.svg#checkmark" /></svg></span><span><span data-i18n="3pIgnoreGenericCosmeticFilters"></span>&nbsp;<span class="fa-icon info" title="3pIgnoreGenericCosmeticFiltersInfo">question-circle</span></span></label>
+    </div>
+</div>
+
+<div>
+    <div><span id="listsOfBlockedHostsPrompt"></span>
+        <div id="lists"></div>
+    </div>
+</div>
 
 </div>
 
 <div id="templates" style="display: none;">
-    <ul>
-        <li class="groupEntry"><span class="geDetails"><span class="geName"></span> <span class="geCount dim"></span></span>
-            <ul class="listEntries"></ul>
-            </li>
-        <li class="listEntry">
-            <input type="checkbox"><!--
-         --><a class="content" type="text/plain" target="_blank" href=""></a>&#8203;<!--
-         --><a class="fa support" href="" target="_blank">&#xf015;</a>&#8203;<!--
-         --><a class="fa remove" href="">&#xf014;</a>&#8203;<!--
-         --><a class="fa mustread" href="" target="_blank">&#xf05a;</a>&#8203;<!--
-         --><span class="fa status unsecure" title="http">&#xf13e;</span>&#8203;<!--
-         --><span class="counts dim"></span>&#8203;<!--
-         --><span class="fa status obsolete" title="3pExternalListObsolete">&#xf071;</span>&#8203;<!--
-         --><span class="fa status cache">&#xf017;</span>&#8203;<!--
-         --><span class="fa status updating" title="3pUpdating">&#xf110;</span>&#8203;<!--
-         --><span class="fa status failed" title="3pNetworkError">&#xf127;</span>
-            </li>
-        <li class="listEntry toImport"><input type="checkbox" id="importLists"><label for="importLists" data-i18n="3pImport"></label><!--
-            --><a class="fa info towiki" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">&#xf05a;</a><!--
-            --><textarea id="externalLists" dir="ltr" spellcheck="false" placeholder="3pExternalListsHint"></textarea>
-        </ul>
+    <div class="groupEntry">
+        <div class="geDetails"><span class="geName"></span> <span class="geCount"></span></div>
+        <div class="listEntries"></div>
+    </div>
+    <div class="li listEntry">
+        <label><span class="input checkbox"><input type="checkbox"><svg><use href="img/material-design.svg#checkmark" /></svg></span><span><span class="listname forinput"></span> <span class="iconbar"><!--
+     --><a class="fa-icon content" href="#" type="text/plain" target="_blank" title="3pViewContent">eye-open</a><!--
+     --><a class="fa-icon support" href="#" target="_blank">home</a><!--
+     --><span class="fa-icon remove">trash-o</span><!--
+     --><a class="fa-icon mustread" href="#" target="_blank">info-circle</a><!--
+     --><span class="fa-icon status unsecure" title="http">unlock-alt</span><!--
+     --><span class="fa-icon status obsolete" title="3pExternalListObsolete">exclamation-triangle</span><!--
+     --><span class="fa-icon status cache">clock-o</span><!--
+     --><span class="fa-icon status updating" title="3pUpdating">spinner</span><!--
+     --><span class="fa-icon status failed" title="3pNetworkError">unlink</span><!--
+     --><span class="counts"></span></span></span></label>
     </div>
+    <div class="listEntry toImport"><label><span class="input checkbox"><input type="checkbox" id="importLists"><svg><use href="img/material-design.svg#checkmark" /></svg></span><span><span class="forinput" data-i18n="3pImport"></span> <a class="fa-icon info towiki" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">info-circle</a></span></label><!--
+        --><!--
+        --><textarea id="externalLists" dir="ltr" spellcheck="false" placeholder="3pExternalListsHint"></textarea>
+    </div>
+</div>
 
+<script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>

diff --git a/src/_locales/ar/messages.json b/src/_locales/ar/messages.json
@@ -364,7 +364,7 @@
     "description": "This will cause uBO to ignore all generic cosmetic filters."
   },
   "3pIgnoreGenericCosmeticFiltersInfo": {
-    "message": "<p>الفلاتر التجميلية العامة هي الفلاتر التجميلية التي تنطبق على كل مواقع الإنترنت.<p>رغم أن uBlock₀ يتعامل معها بكفاءة، لكن يبقى من المرجح أن تستهلك المزيد من الموارد من الذاكرة و قوة المعالج على بعض الصفحات، خاصّةً الصفحات الكبيرة أو الممتدة<p>إهمال هذا النوع من الفلترة يلغي إستهلاك الذاكرة و قوة المعالج التي تستخدم في صفحات الإنترنت والناتجة عن التعامل مع اللفلاتر التجميلية، بالإضافة إلى تقليل إستهلاك الذاكرة من طرف uBlock₀ بشكلٍ عام.<p>من الأفضل أن تُفَعَّل هذه الخاصية على الأجهزة الأقل كفاءة.",
+    "message": "<p>الفلاتر التجميلية العمومية هي الفلاتر التجميلية التي تنطبق على كل مواقع الإنترنت.<p>رغم أن uBlock₀ يتعامل معها بكفاءة، تستطيع الفلاتر التجميلية العمومية أن تستهلك كمية لا بأس بها من الذاكرة و قوة المعالجة على بعض الصفحات، خاصّةً الصفحات الكبيرة أو ذات العمر الطويل.<p>تفعيل هذه الخاصية سيلغي استهلاك الذاكرة و قوة المعالجة المضافان على صفحات الإنترنت الناتجان عن التعامل مع الفلاتر التجميلية العمومية، بالإضافة إلى تقليل استهلاك الذاكرة من uBlock₀ بشكلٍ عام.<p>من الأفضل أن تُفَعَّل هذه الخاصية في الأجهزة الأقل كفاءة.",
     "description": "Describes the purpose of the 'Ignore generic cosmetic filters' feature."
   },
   "3pListsOfBlockedHostsHeader": {
@@ -794,5 +794,37 @@
   "dummy": {
     "message": "يجب أن يكون هذا الإدخال آخر واحد",
     "description": "so we dont need to deal with comma for last entry"
+  },
+  "3pViewContent": {
+    "message": "نظرة على المحتوى",
+    "description": "used as a tooltip for eye icon beside a list"
+  },
+  "aboutSourceCode": {
+    "message": "شيفرة المصدر",
+    "description": "Link text to source code repo"
+  },
+  "aboutTranslations": {
+    "message": "الترجمات",
+    "description": "Link text to translations repo"
+  },
+  "aboutFilterLists": {
+    "message": "القوائم المرشحة",
+    "description": "Link text to uBO's own filter lists repo"
+  },
+  "storageUsed": {
+    "message": "مساحة التخزين المستخدمة: {{value}} {{unit}}",
+    "description": " In Setting pane, renders as (example): Storage used: 13.2 MB"
+  },
+  "KB": {
+    "message": "كيلو بايت",
+    "description": "short for 'kilobytes'"
+  },
+  "MB": {
+    "message": "ميغا بايت",
+    "description": "short for 'megabytes'"
+  },
+  "GB": {
+    "message": "جيغا بايت",
+    "description": "short for 'gigabytes'"
   }
 }
diff --git a/src/_locales/bg/messages.json b/src/_locales/bg/messages.json
@@ -356,15 +356,15 @@
     "description": "English: Parse and enforce Adblock+ element hiding filters."
   },
   "3pParseAllABPHideFiltersInfo": {
-    "message": "<p>Тази опция дава възможност за анализиране и прилагане на <a href=\"https://adblockplus.org/en/faq_internal#elemhide\"> съвместими с Adblock  Plus филтри за  &ldquo;скриване на елементи&rdquo;</a>. Тези филтри, по същество са козметични и служат за скриване на елементи в уеб страница, които се считат за визуално неприятни, и които не могат да бъдат блокирани от системата за филтриране на мрежовите заявки.</p><p>Активирането на тази опция увеличава паметта, която  uBlock₀ използва.</p>",
+    "message": "<p>Настройката разрешава синтактично обособяване и налагане на <a href=\"https://adblockplus.org/en/faq_internal#elemhide\"> съвместими с Adblock Plus филтри за &ldquo;скриване на елементи&rdquo;</a>. Козметични по същество, филтрите скриват визуално неприятни елементи в страницата, които иначе не се блокират от системата за филтриране по мрежова заявка.</p><p>Разрешаването ѝ ще увеличи ползваната от uBlock₀ памет.</p>",
     "description": "Describes the purpose of the 'Parse and enforce cosmetic filters' feature."
   },
   "3pIgnoreGenericCosmeticFilters": {
     "message": "Игнориране на общите козметични филтри",
     "description": "This will cause uBO to ignore all generic cosmetic filters."
   },
   "3pIgnoreGenericCosmeticFiltersInfo": {
-    "message": "<p>Общите козметични филтри са тези филтри, които са предназначени за прилагане във всички уеб сайтове.<p>Въпреки, че работят ефективно с uBlock₀, те могат да окажат влияние върху използването на паметта и процесора при някои уеб страници, особено големите такива.<p>Активирането на тази опция ще премахне натоварването към тях, като резултат от обработката на общите козметични филтри, също така ще намали и използваната от uBlock₀ памет.<p>Тази опция е препоръчително да се използва на по-слаби устройства.",
+    "message": "<p>Общокозметични са филтрите, предназначени за прилагане във всички сайтове.<p>И макар че се ползват ефективно в uBlock₀, те могат съществено да увеличат натоварването на паметта и процесора в определени страници, особено в такива обемисти и дългозареждащи се.<p>Разрешаването ѝ ще премахне натоварването им в тях, поради начина на боравене с общокозметични филтри, както и ще намали ползваната от uBlock₀ памет.<p>Ползването на настройката се препоръчва при по-слаби устройства.",
     "description": "Describes the purpose of the 'Ignore generic cosmetic filters' feature."
   },
   "3pListsOfBlockedHostsHeader": {
@@ -794,5 +794,37 @@
   "dummy": {
     "message": "Това поле трябва да бъде последното",
     "description": "so we dont need to deal with comma for last entry"
+  },
+  "3pViewContent": {
+    "message": "Преглед на съдържанието",
+    "description": "used as a tooltip for eye icon beside a list"
+  },
+  "aboutSourceCode": {
+    "message": "Изходен код",
+    "description": "Link text to source code repo"
+  },
+  "aboutTranslations": {
+    "message": "Преводи",
+    "description": "Link text to translations repo"
+  },
+  "aboutFilterLists": {
+    "message": "Списъци с филтри",
+    "description": "Link text to uBO's own filter lists repo"
+  },
+  "storageUsed": {
+    "message": "Използвано пространство: {{value}} {{unit}}",
+    "description": " In Setting pane, renders as (example): Storage used: 13.2 MB"
+  },
+  "KB": {
+    "message": "КБ",
+    "description": "short for 'kilobytes'"
+  },
+  "MB": {
+    "message": "МБ",
+    "description": "short for 'megabytes'"
+  },
+  "GB": {
+    "message": "ГБ",
+    "description": "short for 'gigabytes'"
   }
 }
diff --git a/src/_locales/bn/messages.json b/src/_locales/bn/messages.json
@@ -794,5 +794,37 @@
   "dummy": {
     "message": "This entry must be the last one",
     "description": "so we dont need to deal with comma for last entry"
+  },
+  "3pViewContent": {
+    "message": "কন্টেন্ট দেখুন",
+    "description": "used as a tooltip for eye icon beside a list"
+  },
+  "aboutSourceCode": {
+    "message": "সোর্স কোড",
+    "description": "Link text to source code repo"
+  },
+  "aboutTranslations": {
+    "message": "অনুবাদ সমূহ",
+    "description": "Link text to translations repo"
+  },
+  "aboutFilterLists": {
+    "message": "ফিল্টার লিস্ট",
+    "description": "Link text to uBO's own filter lists repo"
+  },
+  "storageUsed": {
+    "message": "ব্যবহৃত স্টোরেজ: {{value}}{{unit}}",
+    "description": " In Setting pane, renders as (example): Storage used: 13.2 MB"
+  },
+  "KB": {
+    "message": "কিলোবাইট",
+    "description": "short for 'kilobytes'"
+  },
+  "MB": {
+    "message": "মেগাবাইট",
+    "description": "short for 'megabytes'"
+  },
+  "GB": {
+    "message": "গিগাবাইট",
+    "description": "short for 'gigabytes'"
   }
 }