mirror of
https://github.com/strapi/strapi.git
synced 2025-11-01 10:23:34 +00:00
Improve animation upload timing
This commit is contained in:
Aurelsicoko
parent
b89a8a5abc
commit
8904f2ef60
@ -44,11 +44,13 @@ class Row extends React.Component {
|
||||
},
|
||||
{
|
||||
icoType: 'trash',
|
||||
id: this.props.name,
|
||||
onClick: this.handleClick,
|
||||
},
|
||||
] : [
|
||||
{
|
||||
icoType: 'trash',
|
||||
id: this.props.name,
|
||||
onClick: this.handleClick,
|
||||
},
|
||||
];
|
||||
|
||||
@ -12,6 +12,9 @@ import { makeSelectPluginToDelete } from './selectors';
|
||||
export function* deletePlugin() {
|
||||
try {
|
||||
const plugin = yield select(makeSelectPluginToDelete());
|
||||
|
||||
console.log("DELETE", plugin);
|
||||
|
||||
const requestUrl = `/admin/plugins/uninstall/${plugin}`;
|
||||
|
||||
const resp = yield call(request, requestUrl, { method: 'DELETE' });
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.40317 83.13328"><title>icon_upload_2</title><g opacity="0.05"><rect x="5.02914" y="8.63138" width="77.33334" height="62.29167" rx="4" ry="4" transform="translate(-7.45722 9.32921) rotate(-12)" fill="#fafafb"/><rect x="5.52914" y="9.13138" width="76.33334" height="61.29167" rx="4" ry="4" transform="translate(-7.45722 9.32921) rotate(-12)" fill="none" stroke="#979797"/><path d="M74.25543,36.05041l3.94166,18.54405L20.81242,66.79194l-1.68928-7.94745,10.2265-16.01791,7.92872,5.2368,16.3624-25.62865ZM71.974,6.07811,6.76414,19.93889a1.27175,1.27175,0,0,0-.83343.58815,1.31145,1.31145,0,0,0-.18922,1.01364L16.44028,71.87453a1.31145,1.31145,0,0,0,.58515.849,1.27176,1.27176,0,0,0,1.0006.19831L83.23586,59.06111a1.27177,1.27177,0,0,0,.83343-.58815,1.31146,1.31146,0,0,0,.18922-1.01364L73.55972,7.12547a1.31146,1.31146,0,0,0-.58514-.849A1.27177,1.27177,0,0,0,71.974,6.07811Zm6.80253-.0615L89.4753,56.35046A6.5712,6.5712,0,0,1,88.554,61.435a6.37055,6.37055,0,0,1-4.19192,2.92439L19.15221,78.22019a6.37056,6.37056,0,0,1-5.019-.96655,6.57121,6.57121,0,0,1-2.90975-4.27024L.5247,22.64955A6.57121,6.57121,0,0,1,1.446,17.565a6.37056,6.37056,0,0,1,4.19192-2.92439L70.84779.77981a6.37055,6.37055,0,0,1,5.019.96655A6.5712,6.5712,0,0,1,78.77651,6.01661Z" transform="translate(-0.14193 -0.62489)" fill="#333740"/><rect x="26.56627" y="4.48824" width="62.29167" height="77.33333" rx="4" ry="4" transform="translate(0.94874 87.10632) rotate(-75)" fill="#fafafb"/><rect x="27.06627" y="4.98824" width="61.29167" height="76.33333" rx="4" ry="4" transform="translate(0.94874 87.10632) rotate(-75)" fill="none" stroke="#979797"/><path d="M49.62583,26.96884A7.89786,7.89786,0,0,1,45.88245,31.924a7.96,7.96,0,0,1-10.94716-2.93328,7.89786,7.89786,0,0,1-.76427-6.163,7.89787,7.89787,0,0,1,3.74338-4.95519,7.96,7.96,0,0,1,10.94716,2.93328A7.89787,7.89787,0,0,1,49.62583,26.96884Zm37.007,26.73924L81.72608,72.02042,25.05843,56.83637l2.1029-7.84815L43.54519,39.3589l4.68708,8.26558L74.44644,32.21756ZM98.20721,25.96681,33.81216,8.71221a1.27175,1.27175,0,0,0-1.00961.14568,1.31145,1.31145,0,0,0-.62878.81726L18.85537,59.38007a1.31145,1.31145,0,0,0,.13591,1.02215,1.27176,1.27176,0,0,0,.80151.631l64.39506,17.2546a1.27177,1.27177,0,0,0,1.0096-.14567,1.31146,1.31146,0,0,0,.62877-.81726l13.3184-49.70493a1.31146,1.31146,0,0,0-.13591-1.02215A1.27177,1.27177,0,0,0,98.20721,25.96681Zm6.089,3.03348L90.97784,78.70523a6.5712,6.5712,0,0,1-3.12925,4.1121,6.37055,6.37055,0,0,1-5.06267.70256L18.39086,66.26529a6.37056,6.37056,0,0,1-4.03313-3.13977,6.57121,6.57121,0,0,1-.654-5.12581L27.02217,8.29477a6.57121,6.57121,0,0,1,3.12925-4.11211,6.37056,6.37056,0,0,1,5.06267-.70255l64.39506,17.2546a6.37055,6.37055,0,0,1,4.03312,3.13977A6.5712,6.5712,0,0,1,104.29623,29.0003Z" transform="translate(-0.14193 -0.62489)" fill="#333740"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.8 KiB |
@ -13,6 +13,7 @@ import styles from './styles.scss';
|
||||
|
||||
/* eslint-disable react/no-string-refs */
|
||||
/* eslint-disable jsx-a11y/label-has-for */
|
||||
/* eslint-disable react/jsx-tag-spacing */
|
||||
class PluginInputFile extends React.PureComponent {
|
||||
state = { isDraging: false };
|
||||
|
||||
@ -39,7 +40,6 @@ class PluginInputFile extends React.PureComponent {
|
||||
</FormattedMessage>
|
||||
);
|
||||
|
||||
console.log(showLoader);
|
||||
return (
|
||||
<label
|
||||
className={cn(styles.pluginInputFile, isDraging && styles.pluginInputFileHover, showLoader && styles.quadrat)}
|
||||
@ -50,6 +50,7 @@ class PluginInputFile extends React.PureComponent {
|
||||
}}
|
||||
onDrop={this.handleDrop}
|
||||
>
|
||||
<svg className={styles.icon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.40317 83.13328"><g><rect x="5.02914" y="8.63138" width="77.33334" height="62.29167" rx="4" ry="4" transform="translate(-7.45722 9.32921) rotate(-12)" fill="#fafafb"/><rect x="5.52914" y="9.13138" width="76.33334" height="61.29167" rx="4" ry="4" transform="translate(-7.45722 9.32921) rotate(-12)" fill="none" stroke="#979797"/><path d="M74.25543,36.05041l3.94166,18.54405L20.81242,66.79194l-1.68928-7.94745,10.2265-16.01791,7.92872,5.2368,16.3624-25.62865ZM71.974,6.07811,6.76414,19.93889a1.27175,1.27175,0,0,0-.83343.58815,1.31145,1.31145,0,0,0-.18922,1.01364L16.44028,71.87453a1.31145,1.31145,0,0,0,.58515.849,1.27176,1.27176,0,0,0,1.0006.19831L83.23586,59.06111a1.27177,1.27177,0,0,0,.83343-.58815,1.31146,1.31146,0,0,0,.18922-1.01364L73.55972,7.12547a1.31146,1.31146,0,0,0-.58514-.849A1.27177,1.27177,0,0,0,71.974,6.07811Zm6.80253-.0615L89.4753,56.35046A6.5712,6.5712,0,0,1,88.554,61.435a6.37055,6.37055,0,0,1-4.19192,2.92439L19.15221,78.22019a6.37056,6.37056,0,0,1-5.019-.96655,6.57121,6.57121,0,0,1-2.90975-4.27024L.5247,22.64955A6.57121,6.57121,0,0,1,1.446,17.565a6.37056,6.37056,0,0,1,4.19192-2.92439L70.84779.77981a6.37055,6.37055,0,0,1,5.019.96655A6.5712,6.5712,0,0,1,78.77651,6.01661Z" transform="translate(-0.14193 -0.62489)" fill="#333740"/><rect x="26.56627" y="4.48824" width="62.29167" height="77.33333" rx="4" ry="4" transform="translate(0.94874 87.10632) rotate(-75)" fill="#fafafb"/><rect x="27.06627" y="4.98824" width="61.29167" height="76.33333" rx="4" ry="4" transform="translate(0.94874 87.10632) rotate(-75)" fill="none" stroke="#979797"/><path d="M49.62583,26.96884A7.89786,7.89786,0,0,1,45.88245,31.924a7.96,7.96,0,0,1-10.94716-2.93328,7.89786,7.89786,0,0,1-.76427-6.163,7.89787,7.89787,0,0,1,3.74338-4.95519,7.96,7.96,0,0,1,10.94716,2.93328A7.89787,7.89787,0,0,1,49.62583,26.96884Zm37.007,26.73924L81.72608,72.02042,25.05843,56.83637l2.1029-7.84815L43.54519,39.3589l4.68708,8.26558L74.44644,32.21756ZM98.20721,25.96681,33.81216,8.71221a1.27175,1.27175,0,0,0-1.00961.14568,1.31145,1.31145,0,0,0-.62878.81726L18.85537,59.38007a1.31145,1.31145,0,0,0,.13591,1.02215,1.27176,1.27176,0,0,0,.80151.631l64.39506,17.2546a1.27177,1.27177,0,0,0,1.0096-.14567,1.31146,1.31146,0,0,0,.62877-.81726l13.3184-49.70493a1.31146,1.31146,0,0,0-.13591-1.02215A1.27177,1.27177,0,0,0,98.20721,25.96681Zm6.089,3.03348L90.97784,78.70523a6.5712,6.5712,0,0,1-3.12925,4.1121,6.37055,6.37055,0,0,1-5.06267.70256L18.39086,66.26529a6.37056,6.37056,0,0,1-4.03313-3.13977,6.57121,6.57121,0,0,1-.654-5.12581L27.02217,8.29477a6.57121,6.57121,0,0,1,3.12925-4.11211,6.37056,6.37056,0,0,1,5.06267-.70255l64.39506,17.2546a6.37055,6.37055,0,0,1,4.03312,3.13977A6.5712,6.5712,0,0,1,104.29623,29.0003Z" transform="translate(-0.14193 -0.62489)" fill="#333740"/></g></svg>
|
||||
<p className={styles.textWrapper}>
|
||||
{!showLoader && <FormattedMessage id="upload.PluginInputFile.text" values={{ link }} /> }
|
||||
{showLoader && <FormattedMessage id="upload.PluginInputFile.loading" />}
|
||||
|
||||
@ -4,30 +4,36 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-image: url('../../assets/icons/icon_upload_2.svg');
|
||||
background-size: auto 64px;
|
||||
background-position: center 27px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.pluginInputFile {
|
||||
position: relative;
|
||||
height: 146px;
|
||||
width: 100%;
|
||||
padding-top: 28px;
|
||||
border: 2px dashed #E3E9F3;
|
||||
border-radius: 2px;
|
||||
background-image: url('../../assets/icons/icon_upload_2.svg');
|
||||
background-size: auto 64px;
|
||||
background-position: center 27px;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
|
||||
> input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon{
|
||||
width: 82px;
|
||||
path{
|
||||
fill: #CCD0DA;
|
||||
transition: fill .3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.textWrapper {
|
||||
margin-top: 103px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #9EA7B8;
|
||||
@ -48,28 +54,49 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@mixin smoothBlink($firstColor, $secondColor) {
|
||||
@-webkit-keyframes blink {
|
||||
0% {
|
||||
fill: $firstColor;
|
||||
background-color: $firstColor;
|
||||
}
|
||||
26% {
|
||||
fill: $secondColor;
|
||||
background-color: $secondColor;
|
||||
}
|
||||
76% {
|
||||
fill: $firstColor;
|
||||
background-color: $firstColor;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
fill: $firstColor;
|
||||
background-color: $firstColor;
|
||||
}
|
||||
26% {
|
||||
fill: $secondColor;
|
||||
background-color: $secondColor;
|
||||
}
|
||||
76% {
|
||||
fill: $firstColor;
|
||||
background-color: $firstColor;
|
||||
}
|
||||
}
|
||||
|
||||
-webkit-animation: blink 2s linear infinite;
|
||||
-moz-animation: blink 2s linear infinite;
|
||||
-o-animation: blink 2s linear infinite;
|
||||
animation: blink 2s linear infinite;
|
||||
}
|
||||
|
||||
.quadrat {
|
||||
border: 2px dashed rgba(28,93,231,0.10) !important;
|
||||
-webkit-animation: blink 1s infinite; /* Safari 4+ */
|
||||
-moz-animation: blink 1s infinite; /* Fx 5+ */
|
||||
-o-animation: blink 1s infinite; /* Opera 12+ */
|
||||
animation: blink 1s infinite; /* IE 10+, Fx 29+ */
|
||||
}
|
||||
.icon{
|
||||
path {
|
||||
fill: #729BEF;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink {
|
||||
0%, 49% {
|
||||
background-color: rgba(28,93,231,0.01);
|
||||
}
|
||||
50%, 100% {
|
||||
background-color: rgb(250, 250, 251);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 49% {
|
||||
background-color: rgba(28,93,231,0.01);
|
||||
}
|
||||
50%, 100% {
|
||||
background-color: rgb(250, 250, 251);
|
||||
}
|
||||
@include smoothBlink(transparent, rgba(28, 93, 231, 0.05));
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user