Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Upgrade to Emoji-Mart v5 #128

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
3 changes: 3 additions & 0 deletions .gitmodules
Original file line number Diff line number Diff line change
Expand Up @@ -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
3 changes: 1 addition & 2 deletions assets/texts/amoreviewnote.txt
Original file line number Diff line number Diff line change
@@ -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.
6 changes: 6 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion scripts/make.sh
Original file line number Diff line number Diff line change
Expand Up @@ -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/*"

Expand Down
258 changes: 1 addition & 257 deletions src/common/common.css
Original file line number Diff line number Diff line change
@@ -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");
2 changes: 1 addition & 1 deletion src/common/lib/emoji-mart-embed
1 change: 1 addition & 0 deletions src/common/modules/CommonCss
Submodule CommonCss added at bdd81c
2 changes: 1 addition & 1 deletion src/common/modules/PermissionRequest
2 changes: 1 addition & 1 deletion src/common/modules/RandomTips
39 changes: 39 additions & 0 deletions src/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 18 additions & 0 deletions src/package.json
Original file line number Diff line number Diff line change
@@ -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.0.1",
"emoji-mart": "^5.0.0"
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

}
}
4 changes: 1 addition & 3 deletions src/popup/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,12 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../common/common.css">
<link rel="stylesheet" href="/common/lib/emoji-mart-embed/dist/emoji-mart.css">
<!-- <link rel="stylesheet" href="/common/lib/emoji-mart-embed/dist/emoji-mart.css"> -->
<link rel="stylesheet" href="index.css"> <!-- load later then emoji-mart so overwriting is possible -->

<script type="application/javascript" src="../browser-polyfill.js"></script>
<script defer src="../common/common.js" type="module" charset="utf-8"></script>
<script defer src="index.js" type="module" charset="utf-8"></script>
<!-- we need to load emoji-mart last, so autoFocus works -->
<script src="/common/lib/emoji-mart-embed/dist/emoji-mart.js"></script>
</head>
<body>
<aside class="message-container">
Expand Down
Loading