Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
C
coloration
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
typescript
coloration
Commits
535de366
Commit
535de366
authored
May 02, 2020
by
Zéfling
🎨
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
new design for the demo
parent
b6ef36d8
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
264 additions
and
116 deletions
+264
-116
src/app/app.component.html
src/app/app.component.html
+114
-97
src/app/app.component.scss
src/app/app.component.scss
+140
-15
src/index.html
src/index.html
+10
-4
No files found.
src/app/app.component.html
View file @
535de366
...
...
@@ -3,98 +3,99 @@
<main>
<form>
<fieldset>
<fieldset
class=
"source-fieldset"
>
<legend>
Base
</legend>
<label>
Color
:
<input
type=
"text"
<label>
Color:
<input
type=
"text"
[(value)]=
"baseColor"
(change)=
"baseColor = $event.target.value"
placeholder=
"black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title=
"black, #000, rgb(0,0,0), hsl(0,0%,0%)"
></label>
<div
[style.background-color]=
"baseColor"
>
</div>
<div
class=
"source"
*ngIf=
"baseColor"
>
<div
[style.background-color]=
"baseColor"
>
</div>
</div>
</fieldset>
<fieldset>
<fieldset
class=
"additionnal"
>
<legend>
Additionnal
</legend>
<div
class=
"additionnal"
>
<div
class=
"luminosity"
>
<label>
<span>
Luminosity [-1; 1]:
</span><input
type=
"number"
min=
"-1.000"
max=
"1.000"
step=
"0.001"
[value]=
"luminosity"
(change)=
"luminosity = $event.target.value"
></label>
</div>
<div
class=
"red"
>
<label><span>
Red [-256; 256]:
</span><input
type=
"number"
min=
"-256"
max=
"256"
step=
"1"
[value]=
"red"
(change)=
"red = $event.target.value"
></label>
</div>
<div
class=
"green"
>
<label><span>
Green [-256; 256]:
</span><input
type=
"number"
min=
"-255"
max=
"256"
step=
"1"
[value]=
"green"
(change)=
"green = $event.target.value"
></label>
</div>
<div
class=
"blue"
>
<label><span>
Blue [-256; 256]:
</span><input
type=
"number"
min=
"-255"
max=
"256"
step=
"1"
[value]=
"blue"
(change)=
"blue = $event.target.value"
></label>
</div>
<div
class=
"hue"
>
<label><span>
Hue [-360; 360]°:
</span><input
type=
"number"
max=
"-360"
max=
"360"
step=
"1"
[value]=
"hue"
(change)=
"hue = $event.target.value"
></label>
</div>
<div
class=
"saturation"
>
<label><span>
Saluration [-100; 100]%:
</span><input
type=
"number"
min=
"-100"
max=
"100"
step=
"1"
[value]=
"saturation"
(change)=
"saturation = $event.target.value"
></label>
</div>
<div
class=
"value"
>
<label><span>
Value [-100; 100]%:
</span><input
type=
"number"
min=
"-100"
max=
"100"
step=
"1"
[value]=
"value"
(change)=
"value = $event.target.value"
></label>
</div>
<div
class=
"maskColor"
>
<label><span>
Mask color:
</span><input
type=
"text"
[value]=
"maskColor"
(change)=
"maskColor = $event.target.value"
placeholder=
"black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title=
"black, #000, rgb(0,0,0), hsl(0,0%,0%)"
></label>
</div>
<div
class=
"maskOpacity"
>
<label><span>
+ Mask opacity [0; 1]:
</span><input
type=
"number"
min=
"0"
max=
"1"
step=
"0.001"
[value]=
"maskOpacity"
(change)=
"maskOpacity = $event.target.value"
></label>
</div>
<div
class=
"alpha"
>
<label><span>
Alpha [-1; 1]:
</span><input
type=
"number"
min=
"-1.000"
max=
"1.000"
step=
"0.001"
[value]=
"alpha"
(change)=
"alpha = $event.target.value"
></label>
</div>
<div
class=
"luminosity"
>
<label>
<span>
Luminosity [-1; 1]:
</span><input
type=
"number"
min=
"-1.000"
max=
"1.000"
step=
"0.001"
[value]=
"luminosity"
(change)=
"luminosity = $event.target.value"
></label>
</div>
<div
class=
"red"
>
<label><span>
Red [-256; 256]:
</span><input
type=
"number"
min=
"-256"
max=
"256"
step=
"1"
[value]=
"red"
(change)=
"red = $event.target.value"
></label>
</div>
<div
class=
"green"
>
<label><span>
Green [-256; 256]:
</span><input
type=
"number"
min=
"-255"
max=
"256"
step=
"1"
[value]=
"green"
(change)=
"green = $event.target.value"
></label>
</div>
<div
class=
"blue"
>
<label><span>
Blue [-256; 256]:
</span><input
type=
"number"
min=
"-255"
max=
"256"
step=
"1"
[value]=
"blue"
(change)=
"blue = $event.target.value"
></label>
</div>
<div
class=
"hue"
>
<label><span>
Hue [-360; 360]°:
</span><input
type=
"number"
max=
"-360"
max=
"360"
step=
"1"
[value]=
"hue"
(change)=
"hue = $event.target.value"
></label>
</div>
<div
class=
"saturation"
>
<label><span>
Saluration [-100; 100]%:
</span><input
type=
"number"
min=
"-100"
max=
"100"
step=
"1"
[value]=
"saturation"
(change)=
"saturation = $event.target.value"
></label>
</div>
<div
class=
"value"
>
<label><span>
Value [-100; 100]%:
</span><input
type=
"number"
min=
"-100"
max=
"100"
step=
"1"
[value]=
"value"
(change)=
"value = $event.target.value"
></label>
</div>
<div
class=
"maskColor"
>
<label><span>
Mask color:
</span><input
type=
"text"
[value]=
"maskColor"
(change)=
"maskColor = $event.target.value"
placeholder=
"black, #000, rgb(0,0,0), hsl(0,0%,0%)"
title=
"black, #000, rgb(0,0,0), hsl(0,0%,0%)"
></label>
</div>
<div
class=
"maskOpacity"
>
<label><span>
+ Mask opacity [0; 1]:
</span><input
type=
"number"
min=
"0"
max=
"1"
step=
"0.001"
[value]=
"maskOpacity"
(change)=
"maskOpacity = $event.target.value"
></label>
</div>
<div
class=
"alpha"
>
<label><span>
Alpha [-1; 1]:
</span><input
type=
"number"
min=
"-1.000"
max=
"1.000"
step=
"0.001"
[value]=
"alpha"
(change)=
"alpha = $event.target.value"
></label>
</div>
<div
class=
"button"
>
<button
type=
"button"
...
...
@@ -103,21 +104,33 @@
</fieldset>
</form>
<aside>
<fieldset>
<fieldset
class=
"result-fieldset"
>
<legend>
Result
</legend>
<div
[style.background-image]=
"gradient"
>
</div>
<div>
HEX : {{colorHex || '--'}}
<div
[style.background-color]=
"colorHex"
>
</div>
<div
class=
"result"
>
<div
[style.background-image]=
"gradient"
>
</div>
</div>
<div
class=
"value-result"
>
<span>
Hexa:
</span>
<textarea
readonly
>
{{colorHex || '--'}}
</textarea>
<div
class=
"result"
>
<div
[style.background-color]=
"colorHex"
>
</div>
</div>
</div>
<div>
RGB : {{colorRgb || '--'}}
<div
[style.background-color]=
"colorRgb"
>
</div>
<div
class=
"value-result"
>
<span>
RGB:
</span>
<textarea
readonly
>
{{colorRgb || '--'}}
</textarea>
<div
class=
"result"
>
<div
[style.background-color]=
"colorRgb"
>
</div>
</div>
</div>
<div>
HSL : {{colorHsl || '--'}}
<div
[style.background-color]=
"colorHsl"
>
</div>
<div
class=
"value-result"
>
<span>
HSL:
</span>
<textarea
readonly
>
{{colorHsl || '--'}}
</textarea>
<div
class=
"result"
>
<div
[style.background-color]=
"colorHsl"
>
</div>
</div>
</div>
</fieldset>
</aside>
...
...
@@ -148,4 +161,8 @@
<code>
hsl(0, 0%, 0%, 0.1)
</code>
,
<code>
hsla(0, 0%, 0%, .1)
</code>
,
<code>
hsla(0 0% 0%, .1)
</code>
</ul>
\ No newline at end of file
</ul>
<footer>
<a
href=
"https://git.ikilote.net/angular/coloration"
>
Source code
</a>
</footer>
\ No newline at end of file
src/app/app.component.scss
View file @
535de366
::ng-deep
{
:root
{
--checkerboard-bg
:
linear-gradient
(
45deg
,
#888
25%
,
transparent
25%
,
transparent
75%
,
#888
75%
)
,
linear-gradient
(
45deg
,
#888
25%
,
transparent
25%
,
transparent
75%
,
#888
75%
);
--rainbow-bg
:
linear-gradient
(
90deg
,
#ff2400
,
#e81d1d
,
#e8b71d
,
#e3e81d
,
#1de840
,
#1ddde8
,
#2b1de8
,
#dd00f3
,
#dd00f3
);
}
body
{
background
:
#111
;
color
:
white
;
font-family
:
sans
;
}
*
{
box-sizing
:
border-box
;
}
}
main
{
display
:
flex
;
}
form
{
flex
:
3
;
flex
:
4
;
}
aside
{
...
...
@@ -17,10 +34,12 @@ aside {
display
:
grid
;
width
:
100%
;
grid-template
:
"lum . alpha "
35px
"red green blue "
35px
"hue sat value "
35px
"color opacity . "
35px
/
1fr
1fr
1fr
;
"lum . alpha "
35px
"red green blue "
35px
"hue sat value "
35px
"color opacity . "
35px
"button button button "
70px
/
1fr
1fr
1fr
;
gap
:
13px
0
;
label
{
display
:flex
;
...
...
@@ -33,9 +52,102 @@ aside {
}
input
{
width
:
120px
;
width
:
150px
;
}
}
fieldset
{
margin-top
:
20px
;
background-color
:
#222
;
border
:
0
;
box-shadow
:
0
0
4px
-1px
#555
;
}
legend
{
position
:
relative
;
top
:
-10px
;
font-weight
:
bold
;
left
:
-5px
;
}
input
,
textarea
{
color
:
#AAA
;
background
:
#111
;
border
:
1px
solid
#444
;
line-height
:
30px
;
padding
:
0
10px
;
&
[
type
=
"number"
]
{
text-align
:
right
;
}
}
textarea
{
height
:
34px
;
resize
:
none
;
}
button
{
background-color
:
#ac6666
;
border
:
0
;
padding
:
10px
30px
;
color
:
white
;
font-weight
:
bold
;
border-radius
:
30px
;
box-shadow
:
2px
2px
5px
#661d0c
;
transition
:
all
0
.4s
;
&
:hover
{
background-color
:
#8a5252
;
}
&
:action
{
background-color
:
#bd8585
;
}
}
.source-fieldset
{
display
:
flex
;
}
.source
{
flex
:
1
;
margin-left
:
50px
;
}
.source
,
.result
{
background-color
:
#ddd
;
background-image
:
var
(
--
checkerboard-bg
);
background-size
:
10px
10px
;
background-position
:
0
0
,
5px
5px
;
display
:
flex
;
border
:
1px
solid
rgb
(
81
,
81
,
81
);
border-radius
:
4px
;
overflow
:
hidden
;
div
{
flex
:
1
}
}
}
.value-result
{
display
:
grid
;
grid-template
:
'name value'
auto
'show show '
auto
/
55px
1fr
;
&
>
span
{
grid-area
:
name
;
}
&
>
textarea
{
grid-area
:
value
;
}
&
>
div
{
grid-area
:
show
;
}
}
.luminosity
{
grid-area
:
lum
;
span
:
:
before
{
background
:linear-gradient
(
90deg
,
black
,
white
)
}}
.maskColor
{
grid-area
:
color
;}
...
...
@@ -43,23 +155,36 @@ aside {
.red
{
grid-area
:
red
;
span
:
:
before
{
background
:
red
;}}
.green
{
grid-area
:
green
;
span
:
:
before
{
background
:
green
;}}
.blue
{
grid-area
:
blue
;
span
:
:
before
{
background
:
blue
;}}
.hue
{
grid-area
:
hue
;
span
:
:
before
{
background
:
linear-gradient
(
90deg
,
#ff2400
,
#e81d1d
,
#e8b71d
,
#e3e81d
,
#1de840
,
#1ddde8
,
#2b1de8
,
#dd00f3
,
#dd00f3
);}}
.saturation
{
grid-area
:
sat
;
span
:
:
before
{
background
:linear-gradient
(
90deg
,
#808080
,
red
)
}}
.value
{
grid-area
:
value
;
span
:
:
before
{
background
:linear-gradient
(
90deg
,
black
,
white
)
}}
.alpha
{
grid-area
:
alpha
;
span
:
:
before
{
background-color
:
#ddd
;
background-image
:
linear-gradient
(
45deg
,
#888
25%
,
transparent
25%
,
transparent
75%
,
#888
75%
)
,
linear-gradient
(
45deg
,
#888
25%
,
transparent
25%
,
transparent
75%
,
#888
75%
);
background-size
:
5px
5px
;
background-position
:
0
0
,
2px
2
px
;}}
.hue
{
grid-area
:
hue
;
span
:
:
before
{
background
:
var
(
--
rainbow-bg
);}}
.saturation
{
grid-area
:
sat
;
span
:
:
before
{
background
:linear-gradient
(
90deg
,
#808080
,
red
)
;
}}
.value
{
grid-area
:
value
;
span
:
:
before
{
background
:linear-gradient
(
90deg
,
black
,
white
)
;
}}
.alpha
{
grid-area
:
alpha
;
span
:
:
before
{
background-color
:
#ddd
;
background-image
:
var
(
--
checkerboard-bg
);
background-size
:
6px
6px
;
background-position
:
0
0
,
3px
3
px
;}}
.luminosity
,
.red
,
.green
,
.blue
,
.hue
,
.saturation
,
.value
,
.alpha
{
span
:
:
before
{
content
:
' '
;
display
:
inline-block
;
height
:
1
0
px
;
width
:
1
0
px
;
height
:
1
4
px
;
width
:
1
4
px
;
border
:
1px
solid
black
;
margin-right
:
3px
;
position
:
relative
;
top
:
2px
;
}
}
.button
{
text-align
:
center
;
padding-top
:
10px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
grid-area
:
button
;
}
.result
{
margin
:
9px
;
height
:
42px
;
}
a
{
color
:
aliceblue
;
}
\ No newline at end of file
src/index.html
View file @
535de366
<!doctype html>
<html
lang=
"en"
>
<head>
<meta
charset=
"utf-8"
>
<title>
ColorationDemo
</title>
<base
href=
"/"
>
<base
href=
"
.
/"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<link
rel=
"icon"
type=
"image/x-icon"
href=
"favicon.ico"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<link
rel=
"icon"
type=
"image/x-icon"
href=
"favicon.ico"
>
</head>
<body>
<app-root></app-root>
</body>
</html>
</html>
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment