From 343ae43683888ef431d411c93220df096d149425 Mon Sep 17 00:00:00 2001 From: Hugo Lopez Date: Thu, 23 May 2024 16:17:01 +0200 Subject: [PATCH] align CSS/HTML selectors with i18n naming convention --- SignItCoreContent.js | 16 ++++----- SignItVideosGallery.js | 2 +- content_scripts/signit.css | 56 ++++++++++++++--------------- content_scripts/signit.js | 14 ++++---- popup/popup.css | 74 +++++++++++++++++++------------------- popup/popup.html | 10 +++--- popup/popup.js | 20 +++++------ 7 files changed, 96 insertions(+), 96 deletions(-) diff --git a/SignItCoreContent.js b/SignItCoreContent.js index 13095f0..9d068b9 100644 --- a/SignItCoreContent.js +++ b/SignItCoreContent.js @@ -21,9 +21,9 @@ var SignItCoreContent = function (locale) { console.log("Passed trough ! :", locale); console.log("SignItCoreContent.js",banana ); this.$container = $(` -
+

-
+

Media: @@ -34,11 +34,11 @@ var SignItCoreContent = function (locale) {

-
+

Definition: ${ banana.i18n("si-panel-definitions-title",locale) }

-
-
+
+
${ banana.i18n("si-panel-definitions-wikt-pointer",locale) }
@@ -71,9 +71,9 @@ var SignItCoreContent = function (locale) { this.$videosPanelContent = this.$container.find(".signit-video"); this.$videosPanelGallery = new SignItVideosGallery( this.$videosPanelContent ); - this.$definitionPanelContent = this.$container.find(".signit-definition"); - this.$definitionPanelText = this.$container.find(".signit-definition-text"); - this.$definitionPanelSource = this.$container.find(".signit-definition-source a"); + this.$definitionPanelContent = this.$container.find(".signit-definitions"); + this.$definitionPanelText = this.$container.find(".signit-definitions-text"); + this.$definitionPanelSource = this.$container.find(".signit-definitions-source a"); this.$definitionPanelSpinner = this.$container.find(".signit-loading"); this.$definitionPanelError = this.$container.find(".signit-error"); diff --git a/SignItVideosGallery.js b/SignItVideosGallery.js index 196e9e6..6db0463 100644 --- a/SignItVideosGallery.js +++ b/SignItVideosGallery.js @@ -4,7 +4,7 @@ var SignItVideosGallery = function ( container ) { this.previousVideoButton = new OO.ui.ButtonWidget( { icon: 'previous', framed: false } ); this.nextVideoButton = new OO.ui.ButtonWidget( { icon: 'next', framed: false } ); - this.$videoContainer = $( '
' ); + this.$videoContainer = $( '
' ); container.append( this.previousVideoButton.$element ).append( this.$videoContainer ).append( this.nextVideoButton.$element ); diff --git a/content_scripts/signit.css b/content_scripts/signit.css index fdfb2d5..0d7697c 100644 --- a/content_scripts/signit.css +++ b/content_scripts/signit.css @@ -1,27 +1,27 @@ /* *************************************************************** */ /* Modal structure *********************************************** */ -.signit-popup-anchor { +.signit-modal-anchor { position: absolute; z-index: -99999; /* put it under everything else so it doesn't disturb anything */ } /* *************************************************************** */ /* Popup outline ************************************************* */ -.signit-popup { +.signit-modal { z-index: 9999; } /* above everythings */ -.signit-popup .oo-ui-popupWidget-popup { +.signit-modal .oo-ui-popupWidget-popup { max-height: 500px; } -.signit-popup .oo-ui-popupWidget-body { +.signit-modal .oo-ui-popupWidget-body { margin: 0; } /* *************************************************************** */ /* Popup content ************************************************* */ -.signit-popup h1 { +.signit-modal h1 { margin-bottom: 0.6em; font-size: 188%; color: black; @@ -34,26 +34,26 @@ box-shadow: 0 0px 5px -2px black; } -.signit-popup h2 { +.signit-modal h2 { display: none; } -.signit-popup-content { +.signit-modal-content { display: flex; flex: 1; align-items: center; margin: 0 0.85714286em 0.57142857em; } -.signit-popup-content > .signit-panel-separator { +.signit-modal-content > .signit-panel-separator { flex: 0 0 1px; margin: 25px 10px; background: #a2a9b1; align-self: stretch; } -.signit-popup-content > .signit-panel-videos, -.signit-popup-content > .signit-panel-definitions { +.signit-modal-content > .signit-panel-videos, +.signit-modal-content > .signit-panel-definitions { flex: 0 1 auto; width: 400px; } @@ -105,19 +105,19 @@ /* *************************************************************** */ /* Definition panel (right/bottom) ******************************* */ -.signit-definition-text { +.signit-definitions-text { overflow-y: auto; max-height: 340px; text-align: left; } -.signit-definition-text p, -.signit-definition-text b, -.signit-definition-text span, -.signit-definition-text i, -.signit-definition-text a, -.signit-definition-text ol, -.signit-definition-text li { +.signit-definitions-text p, +.signit-definitions-text b, +.signit-definitions-text span, +.signit-definitions-text i, +.signit-definitions-text a, +.signit-definitions-text ol, +.signit-definitions-text li { all: initial; font-size: 16px; font-family: sans-serif; @@ -125,49 +125,49 @@ color: #222222; } -.signit-definition-text p { +.signit-definitions-text p { margin: 0.4em 0 0.5em 0; padding: 0; display: block; } -.signit-definition-text ol { +.signit-definitions-text ol { list-style-type: decimal; margin: 0.3em 0 0 3.2em; display: block; } -.signit-definition-text ol li { +.signit-definitions-text ol li { display: list-item; list-style-type: decimal; margin-bottom: 0.8em; } -.signit-definition-text i { +.signit-definitions-text i { font-style: italic; } -.signit-definition-text b { +.signit-definitions-text b { font-weight: bold; } -.signit-definition-text a { +.signit-definitions-text a { color: #0645ad; } -.signit-definition-text a:hover { +.signit-definitions-text a:hover { text-decoration: underline; } -.signit-definition-text ol ul { +.signit-definitions-text ol ul { display: none; } -.signit-definition-text .reference { +.signit-definitions-text .reference { display: none; } -.signit-definition-source { +.signit-definitions-source { height: 20px; text-align: right; margin-top: 4px; diff --git a/content_scripts/signit.js b/content_scripts/signit.js index 50c9101..61fa189 100644 --- a/content_scripts/signit.js +++ b/content_scripts/signit.js @@ -140,10 +140,10 @@ var activePanels = await browser.storage.local.get( 'choosepanels' ); activepanels = Object.values( activePanels)[0]; console.log('toggle: ', activePanels, activepanels ) - $(".signit-popup-content > *").hide(); - $(".signit-popup-content > .signit-panel-videos").toggle(activepanels == 'definition'?false:true); - $(".signit-popup-content > .signit-panel-separator").toggle(activepanels == 'both'?true:false); - $(".signit-popup-content > .signit-panel-definitions").toggle(activepanels == 'video'? false:true); + $(".signit-modal-content > *").hide(); + $(".signit-modal-content > .signit-panel-videos").toggle(activepanels == 'definition'?false:true); + $(".signit-modal-content > .signit-panel-separator").toggle(activepanels == 'both'?true:false); + $(".signit-modal-content > .signit-panel-definitions").toggle(activepanels == 'video'? false:true); } /* *************************************************************** */ @@ -159,7 +159,7 @@ // Setup an absolute-positionned $anchorModal we can programatically move // to be able to point exactly some coords with our popup later - $anchorModal = $( '
' ); + $anchorModal = $( '
' ); $( 'body' ).append( $anchorModal ); // Create and add our popup to the DOM @@ -174,7 +174,7 @@ autoFlip: true, hideWhenOutOfView: false, $container: $( 'body' ), - classes: [ 'signit-popup' ] + classes: [ 'signit-modal' ] } ); $( 'body' ).append( popup.$element ); } @@ -204,7 +204,7 @@ // refresh with new content, panels check, width. content.refresh( message.text, message.files ); showPanels(); - $( 'signit-popup').css( 'width', signItModalWidth() ); + $( 'signit-modal').css( 'width', signItModalWidth() ); // Show again popup.toggle( true ); popup.toggleClipping( false ); diff --git a/popup/popup.css b/popup/popup.css index 0dff3b8..7c7516a 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -11,7 +11,7 @@ html, body { to {transform: rotate(360deg);} } -#popup-header { +#signit-popup-header { width: 100%; height: 100px; background-color: #00a99d; @@ -20,17 +20,17 @@ html, body { text-align: center; } -#popup-header a img { +#signit-popup-header a img { height: 100%; } -#popup-loading { +#signit-popup-loading { width: 100%; text-align: center; color: black; } -#popup-loading-spinner { +#signit-popup-loading-spinner { animation: spinner 1.5s linear infinite; width:40px; padding-top: 40px; @@ -38,41 +38,41 @@ html, body { margin: auto; } -#popup-loaded { +#signit-popup-loaded { display:none; /* hidden by default, will be shown when it's ready to be shown */ } -.popup-tabs, -.popup-tabs .oo-ui-menuLayout-menu, -.popup-tabs .oo-ui-menuLayout-content { +.signit-popup-tabs, +.signit-popup-tabs .oo-ui-menuLayout-menu, +.signit-popup-tabs .oo-ui-menuLayout-content { position: unset; } -.popup-tabs .oo-ui-tabSelectWidget { +.signit-popup-tabs .oo-ui-tabSelectWidget { background-color: #00a99d; } -.popup-tabs .oo-ui-tabOptionWidget, .popup-tabs .oo-ui-tabOptionWidget:hover { +.signit-popup-tabs .oo-ui-tabOptionWidget, .signit-popup-tabs .oo-ui-tabOptionWidget:hover { color: white; } -.popup-tabs .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { +.signit-popup-tabs .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { color: #00a99d; } -.popup-tabs .oo-ui-panelLayout-expanded { +.signit-popup-tabs .oo-ui-panelLayout-expanded { position: static; padding-left: 0; padding-right: 0; } -.popup-tab-param, -.popup-tab-view-search { +.signit-popup-tab-settings, +.signit-popup-tab-browse { margin: 0 6px 10px 6px; padding-right: 10px; overflow-x: hidden; } -.popup-historyline { +.signit-popup-tab-history-line { padding: 8px 20px; color: #00a99d; font-weight: bold; @@ -80,7 +80,7 @@ html, body { cursor: pointer; } -.popup-historyline:hover { +.signit-popup-tab-history-line:hover { background-color: #00a99d; color: white; } @@ -97,13 +97,13 @@ html, body { /* */ -.signit-definition-text p, -.signit-definition-text b, -.signit-definition-text span, -.signit-definition-text i, -.signit-definition-text a, -.signit-definition-text ol, -.signit-definition-text li { +.signit-definitions-text p, +.signit-definitions-text b, +.signit-definitions-text span, +.signit-definitions-text i, +.signit-definitions-text a, +.signit-definitions-text ol, +.signit-definitions-text li { all: initial; font-size: 16px; font-family: sans-serif; @@ -111,45 +111,45 @@ html, body { color: #222222; } -.signit-definition-text p { +.signit-definitions-text p { margin: 0.4em 0 0.5em 0; padding: 0; display: block; } -.signit-definition-text ol { +.signit-definitions-text ol { list-style-type: decimal; margin: 0.3em 0 0 3.2em; display: block; } -.signit-definition-text ol li { +.signit-definitions-text ol li { display: list-item; list-style-type: decimal; margin-bottom: 0.8em; } -.signit-definition-text i { +.signit-definitions-text i { font-style: italic; } -.signit-definition-text b { +.signit-definitions-text b { font-weight: bold; } -.signit-definition-text a { +.signit-definitions-text a { color: #0645ad; } -.signit-definition-text a:hover { +.signit-definitions-text a:hover { text-decoration: underline; } -.signit-definition-text ol ul { +.signit-definitions-text ol ul { display: none; } -.signit-definition-text .reference { +.signit-definitions-text .reference { display: none; } @@ -159,11 +159,11 @@ html, body { -.signit-popup-container h1 { +.signit-modal-container h1 { display: none; } -.signit-popup-container h2 { +.signit-modal-container h2 { background-color: #00a99d; padding: 5px 6px; font-size: 1em; @@ -190,16 +190,16 @@ html, body { width: 345px; } -.signit-definition { +.signit-definitions { padding-right: 12px; padding-left: 6px; } -.signit-definition-text { +.signit-definitions-text { padding-right: 8px; } -.signit-definition-source { +.signit-definitions-source { height: 20px; text-align: right; margin-top: 4px; diff --git a/popup/popup.html b/popup/popup.html index 5962e21..db5709c 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -8,17 +8,17 @@ -