diff --git a/.gitignore b/.gitignore index a3a093a..015e043 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,3 @@ node_modules/ # do not commit emoji images src/popup/img/emoji-images/*.png - -# private AMO stuff -assets/texts/en/amo-review.txt diff --git a/.gitmodules b/.gitmodules index 4509f58..57c27e8 100644 --- a/.gitmodules +++ b/.gitmodules @@ -37,3 +37,6 @@ [submodule "src/common/modules/EnvironmentDetector"] path = src/common/modules/EnvironmentDetector url = https://github.com/TinyWebEx/EnvironmentDetector +[submodule "src/common/modules/CommonCss"] + path = src/common/modules/CommonCss + url = https://github.com/TinyWebEx/CommonCss diff --git a/assets/texts/amoreviewnote.txt b/assets/texts/amoreviewnote.txt index 42f0162..a68b748 100644 --- a/assets/texts/amoreviewnote.txt +++ b/assets/texts/amoreviewnote.txt @@ -1,4 +1,3 @@ -The submitted source code is just for embedding of emoji-mart, see https://github.com/rugk/emoji-mart-embed/ for the whole source online. -You can build that separately and include the whole resulting git repo in the add-on. All other parts of the add-on are unminified/untranspiled (JavaScript) files. +The submitted source code includes emoji-mart as a dependency: https://github.com/missive/emoji-mart The whole add-on source is also available at https://github.com/rugk/awesome-emoji-picker. diff --git a/jsconfig.json b/jsconfig.json index c37ec57..a0cd86e 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { - "target": "es2021", - "module": "es2021", + "target": "es2022", + "module": "es2022", "checkJs": true, "strict": true, "noImplicitAny": false, @@ -11,7 +11,8 @@ "baseUrl": "./src", "paths": { "/*": ["./*"], - } + }, + "types": ["firefox-webext-browser"] }, "exclude": [ "node_modules", diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..f77776c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,27 @@ +{ + "name": "awesome-emoji-picker", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "devDependencies": { + "@types/firefox-webext-browser": "^120.0.4" + } + }, + "node_modules/@types/firefox-webext-browser": { + "version": "120.0.4", + "resolved": "https://registry.npmjs.org/@types/firefox-webext-browser/-/firefox-webext-browser-120.0.4.tgz", + "integrity": "sha512-lBrpf08xhiZBigrtdQfUaqX1UauwZ+skbFiL8u2Tdra/rklkKadYmIzTwkNZSWtuZ7OKpFqbE2HHfDoFqvZf6w==", + "dev": true, + "license": "MIT" + } + }, + "dependencies": { + "@types/firefox-webext-browser": { + "version": "120.0.4", + "resolved": "https://registry.npmjs.org/@types/firefox-webext-browser/-/firefox-webext-browser-120.0.4.tgz", + "integrity": "sha512-lBrpf08xhiZBigrtdQfUaqX1UauwZ+skbFiL8u2Tdra/rklkKadYmIzTwkNZSWtuZ7OKpFqbE2HHfDoFqvZf6w==", + "dev": true + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..a579172 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "devDependencies": { + "@types/firefox-webext-browser": "^120.0.4" + } +} diff --git a/scripts/make.sh b/scripts/make.sh index fbb9b3c..64da9e6 100755 --- a/scripts/make.sh +++ b/scripts/make.sh @@ -26,7 +26,7 @@ zip -r -FS "../build/$EXTENSION_NAME.xpi" ./* -x "tests/*" -x "**/tests/*" \ -x "**/.git" -x "**/.gitignore" -x "**/.gitmodules" -x "**/.gitkeep" \ -x "**/.eslintrc" \ -x "**/package.json" -x "**/package-lock.json" -x "**/webpack.config.js" \ - -x "popup/lib/emoji-mart-embed/src.js" \ + -x "node_modules/@emoji-mart/data" \ -x "**/.editorconfig" \ -x "**/.github/*" diff --git a/src/common/common.css b/src/common/common.css index f1fe89c..8ec08f4 100644 --- a/src/common/common.css +++ b/src/common/common.css @@ -1,257 +1 @@ -@import url("./variables.css"); - -body { - direction: __MSG_@@bidi_dir__; -} - -/* https://design.firefox.com/photon/components/links.html */ -a { - color: var(--blue-60); - text-decoration: none; -} - -a:focus { - border-radius: 4px; - box-shadow: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30); -} - -a:hover, a:active { - text-decoration: underline; -} - -a:active { - color: var(--blue-70); -} - -/* external link symbol */ -/* currently disabled, because it is not clear what an external link is, in our case */ -/*a:not([class])[href*="//"]::after { - background-image: url(/common/img/open-in-new.svg); - background-repeat: no-repeat; - background-size: 16px 16px; - content: ""; - display: inline-block; - height: 16px; - margin: -.3rem .15rem 0 .25rem; - vertical-align: middle; - width: 16px; -}*/ - -/* small classes in order to avoid inline CSS */ -.invisible { - display: none !important; -} - -.message-container { - position: relative; -} - -/* buttons https://design.firefox.com/photon/components/buttons.html */ -.micro-button { - min-height: 24px; - height: auto; - border-radius: 2px; - - padding-left: 8px; - padding-right: 8px; - - /* not documented, but looks ugly otherwise */ - padding-top: 2px; - padding-bottom: 2px; - - box-sizing: content-box; - - /* do not break over multiple lines */ - /* white-space: nowrap; */ - height: auto; /* currently, we rather prefer breaking until https://github.com/rugk/offline-qr-code/issues/12 is done */ -} - -/* use light color for dark backgrounds */ -.micro-button:hover.success, -.micro-button:active.success, -.micro-button:hover.warning, -.micro-button:active.warning, -.micro-button:hover.error, -.micro-button:active.error { - color: var(--white-100); -} - -.micro-button.info { - background-color: var(--grey-90-a10); -} -.micro-button:hover.info { - background-color: var(--grey-90-a20); -} -.micro-button:active.info { - background-color: var(--grey-90-a30); -} - -.micro-button.success { - background-color: var(--green-60); -} -.micro-button:hover.success { - background-color: var(--green-70); -} -.micro-button:active.success { - background-color: var(--green-80); -} - -.micro-button.warning { - background-color: var(--yellow-60); -} -.micro-button:hover.warning { - background-color: var(--yellow-70); -} -.micro-button:active.warning { - background-color: var(--yellow-80); -} - -.micro-button.error { - background-color: var(--red-70); - color: var(--white-100); -} -.micro-button:hover.error { - background-color: var(--red-80); -} -.micro-button:active.error { - background-color: var(--red-90); -} - -.micro-button:focus { - box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3) -} - -/* message box */ -/* follows https://design.firefox.com/photon/components/message-bars.html */ -.message-box { - padding: 4px; - - border-radius: 4px; - - /* use whole width */ - width: 100%; - min-height: 32px; - - /* make errors selectable, so users can copy them */ - -moz-user-select: text; - cursor: text; - - /* multiline */ - hypens: auto; - overflow-wrap: break-word; - - /* center-vertically */ - display: flex; - align-items: center; - - z-index: 2; - - /* fade-in transition */ - /* follow https://design.firefox.com/photon/motion/duration-and-easing.html */ - opacity: 1; - max-height: 100px; - - transition: opacity 150ms cubic-bezier(.07,.95,0,1), - max-height 200ms cubic-bezier(.07,.95,0,1); -} -.message-box.fade-hide { - max-height: 0px; - opacity: 0; - min-height: 0px; -} - -/* add margin when messages are stacked on each other */ -.message-box:not(.invisible) ~ .message-box:not(.invisible) { - margin-top: 8px; -} - -.error { - color: var(--white-100); - background-color: var(--red-60); -} - -.info { - color: var(--grey-90); - background-color: var(--grey-20); -} - -.success { - color: var(--green-90); - background-color: var(--green-50); -} - -.warning { - color: var(--yellow-90); - background-color: var(--yellow-50); -} - -/* message box action button */ -.message-action-button { - margin-left: 8px; - - /* center vertially */ - margin-top: auto; - margin-bottom: auto; - - /* some minimum margin to dismiss button or similar */ - margin-right: 4px; - - border: 0; - color: var(--grey-90); - - cursor: pointer; -} - -/* icons for the message boxes */ -.message-box::before { - display: inline-block; - - /* fixed size */ - background-size: 16px 16px; - width: 16px; - height: 16px; - min-width: 16px; - min-height: 16px; - - content: ""; - margin: 4px; -} - -.error::before { - background-image: url('/common/img/error-white.svg'); -} -.info::before { - background-image: url('/common/img/info-dark.svg'); -} -.success::before { - background-image: url('/common/img/check.svg'); -} -.warning::before { - background-image: url('/common/img/warning-dark.svg'); -} - -.icon-dismiss { - box-sizing: content-box; - padding: 2px; - - width: 24px; - height: 24px; - - margin-left: auto; - cursor: pointer; - - /* some animation on hover */ - transition: background-color 150ms cubic-bezier(.07,.95,0,1); -} -.icon-dismiss:hover { - background-color: var(--grey-90-a10); - border-radius: 2px; -} -.icon-dismiss:active { - background-color: var(--grey-90-a20); - border-radius: 2px; -} -.icon-dismiss:focus { - box-shadow: 0 0 0 1px var(--blue-50) inset, 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30); - border-radius: 2px; -} +@import url("./modules/CommonCss/common.css"); \ No newline at end of file diff --git a/src/package-lock.json b/src/package-lock.json new file mode 100644 index 0000000..4fe2124 --- /dev/null +++ b/src/package-lock.json @@ -0,0 +1,29 @@ +{ + "name": "awesome-emoji-picker", + "version": "2.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "awesome-emoji-picker", + "version": "2.0.0", + "license": "ISC", + "dependencies": { + "@emoji-mart/data": "^1.2.1", + "emoji-mart": "^5.6.0" + } + }, + "node_modules/@emoji-mart/data": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.2.1.tgz", + "integrity": "sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw==", + "license": "MIT" + }, + "node_modules/emoji-mart": { + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.6.0.tgz", + "integrity": "sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow==", + "license": "MIT" + } + } +} diff --git a/src/package.json b/src/package.json new file mode 100644 index 0000000..e522fe0 --- /dev/null +++ b/src/package.json @@ -0,0 +1,18 @@ +{ + "name": "awesome-emoji-picker", + "version": "2.0.0", + "repository": { + "type": "git", + "url": "git+https://github.com/rugk/awesome-emoji-picker.git" + }, + "author": "rugk", + "license": "ISC", + "bugs": { + "url": "https://github.com/rugk/awesome-emoji-picker/issues" + }, + "homepage": "https://github.com/rugk/awesome-emoji-picker#readme", + "dependencies": { + "@emoji-mart/data": "^1.2.1", + "emoji-mart": "^5.6.0" + } +} diff --git a/src/popup/index.html b/src/popup/index.html index 123a1a3..5d602f6 100644 --- a/src/popup/index.html +++ b/src/popup/index.html @@ -4,14 +4,12 @@ - + - -