Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ensembl-web
ensembl-client
Commits
638b7417
Unverified
Commit
638b7417
authored
Mar 28, 2019
by
Andrey Azov
Committed by
GitHub
Mar 28, 2019
Browse files
Add spinning loader (#23)
parent
2609cd11
Pipeline
#15793
failed with stage
in 2 minutes and 54 seconds
Changes
9
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
98 additions
and
7 deletions
+98
-7
src/ensembl/src/shared/loader/Loader.scss
src/ensembl/src/shared/loader/Loader.scss
+17
-0
src/ensembl/src/shared/loader/Loader.tsx
src/ensembl/src/shared/loader/Loader.tsx
+14
-0
src/ensembl/src/styles/_settings.scss
src/ensembl/src/styles/_settings.scss
+7
-0
src/ensembl/stories/design-primitives/colours/Colours.stories.tsx
...mbl/stories/design-primitives/colours/Colours.stories.tsx
+17
-2
src/ensembl/stories/shared-components/index.ts
src/ensembl/stories/shared-components/index.ts
+1
-0
src/ensembl/stories/shared-components/loader/Loader.stories.scss
...embl/stories/shared-components/loader/Loader.stories.scss
+6
-0
src/ensembl/stories/shared-components/loader/Loader.stories.tsx
...sembl/stories/shared-components/loader/Loader.stories.tsx
+15
-0
src/ensembl/stories/shared-components/search-field/SearchField.stories.scss
...s/shared-components/search-field/SearchField.stories.scss
+10
-0
src/ensembl/stories/shared-components/search-field/SearchField.stories.tsx
...es/shared-components/search-field/SearchField.stories.tsx
+11
-5
No files found.
src/ensembl/src/shared/loader/Loader.scss
0 → 100644
View file @
638b7417
@import
'src/styles/common'
;
.circleLoader
{
display
:
inline-block
;
border
:
3px
solid
$ens-light-grey
;
border-top-color
:
$ens-red
;
width
:
40px
;
height
:
40px
;
border-radius
:
100%
;
animation
:
loader-spin
1
.3s
linear
infinite
;
}
@keyframes
loader-spin
{
to
{
transform
:
rotate
(
360deg
);
}
}
src/ensembl/src/shared/loader/Loader.tsx
0 → 100644
View file @
638b7417
import
React
from
'
react
'
;
import
classNames
from
'
classnames
'
;
import
styles
from
'
./Loader.scss
'
;
type
Props
=
{
className
?:
string
;
};
export
const
CircleLoader
=
(
props
:
Props
)
=>
{
const
className
=
classNames
(
styles
.
circleLoader
,
props
.
className
);
return
<
div
className
=
{
className
}
/>;
};
src/ensembl/src/styles/_settings.scss
View file @
638b7417
...
...
@@ -106,9 +106,13 @@ $ens-blue: #33adff; // blue on black
$ens-dark-blue
:
#0099ff
;
// blue on white
$ens-light-grey
:
#f1f2f4
;
$ens-medium-light-grey
:
#d4d9de
;
$ens-grey
:
#b7c0c8
;
$ens-medium-dark-grey
:
#9aa7b1
;
$ens-dark-grey
:
#6f8190
;
$ens-red
:
#d90000
;
$ens-white
:
#fff
;
/* stylelint-disable */
...
...
@@ -117,8 +121,11 @@ $ens-white: #fff;
ens-blue
:
$ens-blue
;
ens-light-blue
:
$ens-light-blue
;
ens-dark-blue
:
$ens-dark-blue
;
ens-red
:
$ens-red
;
ens-dark-grey
:
$ens-dark-grey
;
ens-medium-dark-grey
:
$ens-medium-dark-grey
;
ens-grey
:
$ens-grey
;
ens-medium-light-grey
:
$ens-medium-light-grey
;
ens-light-grey
:
$ens-light-grey
;
ens-white
:
$ens-white
;
}
...
...
src/ensembl/stories/design-primitives/colours/Colours.stories.tsx
View file @
638b7417
...
...
@@ -25,16 +25,31 @@ const colours = [
variableName
:
'
$ens-light-blue
'
,
value
:
variables
[
'
ens-light-blue
'
]
},
{
name
:
'
Ensembl red
'
,
variableName
:
'
$ens-red
'
,
value
:
variables
[
'
ens-red
'
]
},
{
name
:
'
Ensembl grey
'
,
variableName
:
'
$ens-grey
'
,
value
:
variables
[
'
ens-grey
'
]
},
{
name
:
'
Ensembl medium dark grey
'
,
variableName
:
'
$ens-medium-dark-grey
'
,
value
:
variables
[
'
ens-medium-dark-grey
'
]
},
{
name
:
'
Ensembl dark grey
'
,
variableName
:
'
$ens-dark-grey
'
,
value
:
variables
[
'
ens-dark-grey
'
]
},
{
name
:
'
Ensembl medium light grey
'
,
variableName
:
'
$ens-medium-light-grey
'
,
value
:
variables
[
'
ens-medium-light-grey
'
]
},
{
name
:
'
Ensembl light grey
'
,
variableName
:
'
$ens-light-grey
'
,
...
...
@@ -51,8 +66,8 @@ storiesOf('Design Primitives|Colours', module).add(
'
colour palette
'
,
()
=>
(
<>
{
colours
.
map
((
colourData
)
=>
(
<
ColourCard
{
...
colourData
}
/>
{
colours
.
map
((
colourData
,
index
)
=>
(
<
ColourCard
key
=
{
index
}
{
...
colourData
}
/>
))
}
</>
),
...
...
src/ensembl/stories/shared-components/index.ts
View file @
638b7417
...
...
@@ -4,3 +4,4 @@ import './dropdown/Dropdown.stories';
import
'
./input/Input.stories
'
;
import
'
./search-field/SearchField.stories
'
;
import
'
./autosuggest-search-field/AutosuggestSearchField.stories
'
;
import
'
./loader/Loader.stories
'
;
src/ensembl/stories/shared-components/loader/Loader.stories.scss
0 → 100644
View file @
638b7417
.fullPageWrapper
{
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
height
:
100vh
;
}
src/ensembl/stories/shared-components/loader/Loader.stories.tsx
0 → 100644
View file @
638b7417
import
React
,
{
useState
}
from
'
react
'
;
import
{
storiesOf
}
from
'
@storybook/react
'
;
import
{
CircleLoader
}
from
'
src/shared/loader/Loader
'
;
import
styles
from
'
./Loader.stories.scss
'
;
storiesOf
(
'
Components|Shared Components/Loader
'
,
module
).
add
(
'
full-page
'
,
()
=>
(
<
div
className
=
{
styles
.
fullPageWrapper
}
>
<
CircleLoader
/>
</
div
>
)
);
src/ensembl/stories/shared-components/search-field/SearchField.stories.scss
View file @
638b7417
@import
'src/styles/common'
;
.searchFieldWrapper
{
padding
:
40px
;
}
...
...
@@ -7,3 +9,11 @@
width
:
300px
;
align-items
:
center
;
}
.circleLoader
{
height
:
20px
;
width
:
20px
;
border-width
:
1px
;
border-color
:
$ens-medium-light-grey
;
border-top-color
:
$ens-red
;
}
src/ensembl/stories/shared-components/search-field/SearchField.stories.tsx
View file @
638b7417
...
...
@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
import
SearchField
from
'
src/shared/search-field/SearchField
'
;
import
QuestionButton
from
'
src/shared/question-button/QuestionButton
'
;
import
{
CircleLoader
}
from
'
src/shared/loader/Loader
'
;
import
styles
from
'
./SearchField.stories.scss
'
;
...
...
@@ -18,13 +19,18 @@ const Wrapper = (props: any) => {
);
};
storiesOf
(
'
Components|Shared Components/SearchField
'
,
module
).
add
(
'
default
'
,
()
=>
(
storiesOf
(
'
Components|Shared Components/SearchField
'
,
module
)
.
add
(
'
default
'
,
()
=>
(
<
Wrapper
searchField
=
{
SearchField
}
className
=
{
styles
.
searchField
}
rightCorner
=
{
<
QuestionButton
onHover
=
{
action
(
'
question-button-hover
'
)
}
/>
}
/>
)
);
))
.
add
(
'
with loader
'
,
()
=>
(
<
Wrapper
searchField
=
{
SearchField
}
className
=
{
styles
.
searchField
}
rightCorner
=
{
<
CircleLoader
className
=
{
styles
.
circleLoader
}
/>
}
/>
));
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