cadence/Carbon
3
9
Fork 1
Code Issues 14 Pull requests 1 Releases Wiki Activity

WIP: Some visual improvements for login #20

Draft
jboi wants to merge 9 commits from fix/login-improvements into princess
pull from: fix/login-improvements
merge into: cadence:princess
Conversation 1 Commits 9 Files changed 7 +99 -11
6 changed files with 99 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit a5309a81b1 - Show all commits

35
package-lock.json generated
View file

@ -1095,6 +1095,11 @@
"to-fast-properties": "^2.0.0"
}
},
"@popperjs/core": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.3.tgz",
"integrity": "sha512-RFwCobxsvZ6j7twS7dHIZQZituMIDJJNHS/qY6iuthVebxS3zhRY+jaC2roEKiAYaVuTcGmX6Luc6YBcf6zJVg=="
},
"@types/color-name": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@ -2092,8 +2097,30 @@
"integrity": "sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==",
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.18.0-next.0",
"has-symbols": "^1.0.1",
"object-keys": "^1.1.1"
},
"dependencies": {
"es-abstract": {
"version": "1.18.0-next.1",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
"integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
"requires": {
"es-to-primitive": "^1.2.1",
"function-bind": "^1.1.1",
"has": "^1.0.3",
"has-symbols": "^1.0.1",
"is-callable": "^1.2.2",
"is-negative-zero": "^2.0.0",
"is-regex": "^1.1.1",
"object-inspect": "^1.8.0",
"object-keys": "^1.1.1",
"object.assign": "^4.1.1",
"string.prototype.trimend": "^1.0.1",
"string.prototype.trimstart": "^1.0.1"
}
}
}
}
}
@ -3643,6 +3670,14 @@
"process": "~0.11.0"
}
},
"tippy.js": {
"version": "6.2.7",
"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.2.7.tgz",
"integrity": "sha512-k+kWF9AJz5xLQHBi3K/XlmJiyu+p9gsCyc5qZhxxGaJWIW8SMjw1R+C7saUnP33IM8gUhDA2xX//ejRSwqR0tA==",
"requires": {
"@popperjs/core": "^2.4.4"
}
},
"to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",

3
package.json
View file

@ -12,7 +12,8 @@
"author": "",
"license": "AGPL-3.0-only",
"dependencies": {
"browserify": "^17.0.0"
"browserify": "^17.0.0",
"tippy.js": "^6.2.7"
},
"devDependencies": {
"@babel/core": "^7.11.1",

11
src/js/login.js
View file

@ -1,3 +1,4 @@
const tippy = require("tippy.js");
const {q, ElemJS, ejs} = require("./basic.js")
const {S_RE_DOMAIN, S_RE_IPV6, S_RE_IPV4} = require("./re.js")
@ -52,6 +53,16 @@ class Username extends ElemJS {
class Homeserver extends ElemJS {
constructor() {
super(q("#homeserver"));
this.tippy = tippy.default(q("#homeserver-question"), {
content: q("#homeserver-popup-template").innerHTML,
allowHTML: true,
interactive: true,
interactiveBorder: 10,
trigger: "mouseenter",
theme: "carbon",
arrow: tippy.roundArrow,
})
}
suggest(value) {

10
src/login.pug
View file

@ -22,11 +22,21 @@ html
input(name="password" autocomplete="current-password" type="password" required)#password
.form-input-container
.homeserver-label
label(for="homeserver") Homeserver
span#homeserver-question (What's this?)
input(type="text" name="homeserver" placeholder="matrix.org")#homeserver
#feedback
.form-input-container
input(type="submit" value="Log in")#submit
template#homeserver-popup-template
.homeserver-popup
p
| Homeserver is the place where your account lives.
| It's usually the website where you registered.
p
| Need help finding a homeserver?
a(href='#') Click here
cadence commented 2020-11-01 09:05:42 +00:00
Copy link

This link doesn't go anywhere. I assume the site is yet to be created?

Can we make the link look like a link, aka underlined and blue?

This link doesn't go anywhere. I assume the site is yet to be created? Can we make the link look like a link, aka underlined and blue?
bad commented 2020-11-01 15:45:54 +00:00
Copy link

Yeah right now we are waiting if someone in the matrix community will make a server picker similiar to joinmastodon.org.

https://github.com/daydream-mx/keymaker looks interesting but if it doesn't get finished we might have to make our own alternative

Yeah right now we are waiting if someone in the matrix community will make a server picker similiar to joinmastodon.org. https://github.com/daydream-mx/keymaker looks interesting but if it doesn't get finished we might have to make our own alternative

24
src/sass/login.sass
View file

@ -1,5 +1,6 @@
@use "./base"
@use "./colors.sass" as c
@use "./colors" as c
@use "./tippy"
.main
justify-content: center
@ -41,6 +42,27 @@
.form-error
color: red
#homeserver-question
cadence commented 2020-11-01 09:08:28 +00:00
Copy link

This needs to be a lighter red for better contrast. Try #ff6561 I guess?

This needs to be a lighter red for better contrast. Try #ff6561 I guess?
bad commented 2020-11-01 15:42:47 +00:00
Copy link

I think we should get a color scheme first and then replace it with css(or sass) variables

#27

I think we should get a color scheme first and then replace it with css(or sass) variables https://gitdab.com/cadence/Carbon/issues/27
font-size: 0.6em
padding-left: 0.2em
cadence commented 2020-11-01 09:10:43 +00:00
Outdated
Copy link

Please create a class .homeserver-question and target that instead. Using IDs in CSS sounds fine but quickly turns into hell. I know this from experience.

Please create a class `.homeserver-question` and target that instead. Using IDs in CSS sounds fine but quickly turns into hell. I know this from experience.
cadence commented 2020-11-01 09:09:40 +00:00
Outdated
Copy link

12px please, it doesn't need to be tiny.

12px please, it doesn't need to be _tiny._
bad commented 2020-11-01 15:43:34 +00:00
Outdated
Copy link

Won't using px cause scaling issues on smaller screens?

Won't using px cause scaling issues on smaller screens?
cadence commented 2020-11-01 23:02:35 +00:00
Outdated
Copy link

No, px will not cause issues.

No, px will not cause issues.
.homeserver-label
bad marked this conversation as resolved
cadence commented 2020-11-01 09:09:50 +00:00
Copy link

This does nothing, remove it.

This does nothing, remove it.
display: flex
justify-content: space-between
align-items: flex-end
.homeserver-popup
p
margin: 0.2em
a
&, &:hover, &:active
color: white
text-decoration: none
&:hover
color: #f00 //Placeholder
@keyframes spin
0%
transform: rotate(0deg)

9
src/sass/tippy.sass Normal file
View file

@ -0,0 +1,9 @@
@use "../../node_modules/tippy.js/dist/tippy.css"
@use "../../node_modules/tippy.js/dist/svg-arrow.css"
@use "./colors.sass" as c
.tippy-box[data-theme~="carbon"]
background-color: c.$milder
border: 2px solid c.$divider
.tippy-svg-arrow
bad marked this conversation as resolved Outdated
cadence commented 2020-11-01 09:11:19 +00:00
Outdated
Copy link

style: indentation 2 spaces, line break above selectors.

style: indentation 2 spaces, line break above selectors.
fill: c.$milder