btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor(ui): faster animations + chore(deps): bump

Browse Source
This commit is contained in:
Liyas Thomas
2020-12-16 06:05:58 +05:30
parent dd40df4b37
commit 9e166774ef
11 changed files with 92 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
assets/scss/styles.scss
View File

@@ -52,7 +52,7 @@ body {
@apply select-none; @apply select-none;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;
@@ -61,7 +61,7 @@ body {
body.afterLoad { body.afterLoad {
@apply transition-colors; @apply transition-colors;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
} }
body.sticky-footer footer { body.sticky-footer footer {
@@ -73,7 +73,7 @@ body.sticky-footer footer {
.layout-enter-active, .layout-enter-active,
.layout-leave-active { .layout-leave-active {
@apply transition-opacity; @apply transition-opacity;
@apply duration-200; @apply duration-150;
} }
.page-enter, .page-enter,
@@ -164,7 +164,7 @@ p {
@apply text-sm; @apply text-sm;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
} }
hr { hr {
@@ -187,7 +187,7 @@ hr {
@apply shadow-lg; @apply shadow-lg;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
@apply bg-ttColor; @apply bg-ttColor;
@apply text-fgColor; @apply text-fgColor;
} }
@@ -202,7 +202,7 @@ hr {
@apply z-30; @apply z-30;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
} }
&[x-placement^="top"] { &[x-placement^="top"] {
@@ -311,7 +311,7 @@ hr {
@apply opacity-0; @apply opacity-0;
@apply transition-opacity; @apply transition-opacity;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
} }
&[aria-hidden="false"] { &[aria-hidden="false"] {
@@ -319,7 +319,7 @@ hr {
@apply opacity-100; @apply opacity-100;
@apply transition-opacity; @apply transition-opacity;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
} }
} }
@@ -344,7 +344,7 @@ button {
@apply font-bold; @apply font-bold;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
@apply fill-current; @apply fill-current;
@apply cursor-pointer; @apply cursor-pointer;
@apply outline-none; @apply outline-none;
@@ -477,7 +477,7 @@ code {
@apply font-normal; @apply font-normal;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
@apply select-text; @apply select-text;
@apply resize-y; @apply resize-y;
@apply outline-none; @apply outline-none;
@@ -538,6 +538,7 @@ pre {
@apply absolute; @apply absolute;
@apply pointer-events-none; @apply pointer-events-none;
@apply font-icon; @apply font-icon;
@apply text-fgLightColor;
content: "\e313"; content: "\e313";
top: 16px; top: 16px;
@@ -578,7 +579,7 @@ input[type="checkbox"] {
@apply text-transparent; @apply text-transparent;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
content: "\2714"; content: "\2714";
height: 16px; height: 16px;
@@ -614,7 +615,7 @@ label {
@apply text-sm; @apply text-sm;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
} }
ul, ul,
@@ -703,7 +704,7 @@ ol li {
@apply fixed; @apply fixed;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
@apply shadow-lg; @apply shadow-lg;
@apply rounded-lg; @apply rounded-lg;

2
components/layout/pw-header.vue
View File

@@ -137,7 +137,7 @@ $responsiveWidth: 768px;
@apply text-xl; @apply text-xl;
@apply transition-colors; @apply transition-colors;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
&:hover { &:hover {
@apply text-acColor; @apply text-acColor;

4
components/layout/pw-section.vue
View File

@@ -19,7 +19,7 @@ fieldset {
@apply bg-bgDarkColor; @apply bg-bgDarkColor;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
legend { legend {
@apply px-4; @apply px-4;
@@ -28,7 +28,7 @@ fieldset {
@apply cursor-pointer; @apply cursor-pointer;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
} }
&.blue legend { &.blue legend {

6
components/layout/sidenav.vue
View File

@@ -177,7 +177,7 @@ $responsiveWidth: 768px;
@apply bg-bgDarkColor; @apply bg-bgDarkColor;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
// @apply overflow-y-auto; // @apply overflow-y-auto;
} }
@@ -206,7 +206,7 @@ nav.primary-nav {
@apply outline-none; @apply outline-none;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
&:hover { &:hover {
@apply text-fgColor; @apply text-fgColor;
@@ -266,7 +266,7 @@ nav.secondary-nav {
@apply outline-none; @apply outline-none;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
&:hover { &:hover {
@apply text-fgColor; @apply text-fgColor;

2
components/ui/accent-mode-picker.vue
View File

@@ -6,7 +6,7 @@
v-for="(color, index) of colors" v-for="(color, index) of colors"
:key="`color-${index}`" :key="`color-${index}`"
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`" v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none" class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
:class="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]" :class="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]"
@click="setActiveColor(color)" @click="setActiveColor(color)"
> >

4
components/ui/autocomplete.vue
View File

@@ -47,9 +47,9 @@
@apply mx-2; @apply mx-2;
@apply left-0; @apply left-0;
@apply z-50; @apply z-50;
@apply transition-transform; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
@apply shadow-lg; @apply shadow-lg;
top: calc(100% - 8px); top: calc(100% - 8px);

2
components/ui/color-mode-picker.vue
View File

@@ -14,7 +14,7 @@
v-for="(color, index) of colors" v-for="(color, index) of colors"
:key="`color-${index}`" :key="`color-${index}`"
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`" v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none" class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
:class="[ :class="[
{ 'bg-bgDarkColor': color === $colorMode.preference }, { 'bg-bgDarkColor': color === $colorMode.preference },
{ 'text-acColor hover:text-acColor': color === $colorMode.value }, { 'text-acColor hover:text-acColor': color === $colorMode.value },

22
components/ui/modal.vue
View File

@@ -11,7 +11,7 @@
<!-- <div class="fade top"></div> <!-- <div class="fade top"></div>
<div class="fade bottom"></div> --> <div class="fade bottom"></div> -->
</div> </div>
<div class="modal-footer"> <div v-if="hasFooterSlot" class="modal-footer">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</div> </div>
@@ -32,7 +32,7 @@
@apply justify-center; @apply justify-center;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
background-color: rgba(0, 0, 0, 0.32); background-color: rgba(0, 0, 0, 0.32);
} }
@@ -52,7 +52,7 @@
@apply m-2; @apply m-2;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
@apply bg-bgColor; @apply bg-bgColor;
@apply rounded-lg; @apply rounded-lg;
@apply shadow-2xl; @apply shadow-2xl;
@@ -90,10 +90,10 @@
.modal-enter .modal-container, .modal-enter .modal-container,
.modal-leave-active .modal-container { .modal-leave-active .modal-container {
@apply transform; @apply transform;
@apply scale-75; @apply scale-90;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
} }
.fade { .fade {
@@ -101,7 +101,7 @@
@apply block; @apply block;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
left: 16px; left: 16px;
right: 20px; right: 20px;
@@ -118,3 +118,13 @@
} }
} }
</style> </style>
<script>
export default {
computed: {
hasFooterSlot() {
return !!this.$slots.footer
},
},
}
</script>

2
components/ui/tabs.vue
View File

@@ -59,7 +59,7 @@
@apply cursor-pointer; @apply cursor-pointer;
@apply transition-colors; @apply transition-colors;
@apply ease-in-out; @apply ease-in-out;
@apply duration-200; @apply duration-150;
.material-icons { .material-icons {
@apply m-4; @apply m-4;

75
package-lock.json generated
View File

@@ -115,12 +115,17 @@
"@babel/types": "^7.12.10" "@babel/types": "^7.12.10"
}, },
"dependencies": { "dependencies": {
"@babel/helper-validator-identifier": {
"version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
},
"@babel/types": { "@babel/types": {
"version": "7.12.10", "version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
"integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==", "integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
"requires": { "requires": {
"@babel/helper-validator-identifier": "^7.10.4", "@babel/helper-validator-identifier": "^7.12.11",
"lodash": "^4.17.19", "lodash": "^4.17.19",
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
@@ -193,12 +198,17 @@
"@babel/types": "^7.12.1" "@babel/types": "^7.12.1"
}, },
"dependencies": { "dependencies": {
"@babel/helper-validator-identifier": {
"version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
},
"@babel/types": { "@babel/types": {
"version": "7.12.10", "version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
"integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==", "integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
"requires": { "requires": {
"@babel/helper-validator-identifier": "^7.10.4", "@babel/helper-validator-identifier": "^7.12.11",
"lodash": "^4.17.19", "lodash": "^4.17.19",
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
@@ -380,12 +390,17 @@
"@babel/types": "^7.12.1" "@babel/types": "^7.12.1"
}, },
"dependencies": { "dependencies": {
"@babel/helper-validator-identifier": {
"version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
},
"@babel/types": { "@babel/types": {
"version": "7.12.10", "version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
"integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==", "integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
"requires": { "requires": {
"@babel/helper-validator-identifier": "^7.10.4", "@babel/helper-validator-identifier": "^7.12.11",
"lodash": "^4.17.19", "lodash": "^4.17.19",
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
@@ -916,9 +931,9 @@
} }
}, },
"@babel/plugin-transform-block-scoping": { "@babel/plugin-transform-block-scoping": {
"version": "7.12.1", "version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.1.tgz", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.11.tgz",
"integrity": "sha512-zJyAC9sZdE60r1nVQHblcfCj29Dh2Y0DOvlMkcqSo0ckqjiCwNiUezUKw+RjOCwGfpLRwnAeQ2XlLpsnGkvv9w==", "integrity": "sha512-atR1Rxc3hM+VPg/NvNvfYw0npQEAcHuJ+MGZnFn6h3bo+1U3BWXMdFMlvVRApBTWKQMX7SOwRJZA5FBF/JQbvA==",
"requires": { "requires": {
"@babel/helper-plugin-utils": "^7.10.4" "@babel/helper-plugin-utils": "^7.10.4"
} }
@@ -1188,15 +1203,15 @@
} }
}, },
"@babel/preset-env": { "@babel/preset-env": {
"version": "7.12.10", "version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.10.tgz", "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.11.tgz",
"integrity": "sha512-Gz9hnBT/tGeTE2DBNDkD7BiWRELZt+8lSysHuDwmYXUIvtwZl0zI+D6mZgXZX0u8YBlLS4tmai9ONNY9tjRgRA==", "integrity": "sha512-j8Tb+KKIXKYlDBQyIOy4BLxzv1NUOwlHfZ74rvW+Z0Gp4/cI2IMDPBWAgWceGcE7aep9oL/0K9mlzlMGxA8yNw==",
"requires": { "requires": {
"@babel/compat-data": "^7.12.7", "@babel/compat-data": "^7.12.7",
"@babel/helper-compilation-targets": "^7.12.5", "@babel/helper-compilation-targets": "^7.12.5",
"@babel/helper-module-imports": "^7.12.5", "@babel/helper-module-imports": "^7.12.5",
"@babel/helper-plugin-utils": "^7.10.4", "@babel/helper-plugin-utils": "^7.10.4",
"@babel/helper-validator-option": "^7.12.1", "@babel/helper-validator-option": "^7.12.11",
"@babel/plugin-proposal-async-generator-functions": "^7.12.1", "@babel/plugin-proposal-async-generator-functions": "^7.12.1",
"@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-dynamic-import": "^7.12.1", "@babel/plugin-proposal-dynamic-import": "^7.12.1",
@@ -1225,7 +1240,7 @@
"@babel/plugin-transform-arrow-functions": "^7.12.1", "@babel/plugin-transform-arrow-functions": "^7.12.1",
"@babel/plugin-transform-async-to-generator": "^7.12.1", "@babel/plugin-transform-async-to-generator": "^7.12.1",
"@babel/plugin-transform-block-scoped-functions": "^7.12.1", "@babel/plugin-transform-block-scoped-functions": "^7.12.1",
"@babel/plugin-transform-block-scoping": "^7.12.1", "@babel/plugin-transform-block-scoping": "^7.12.11",
"@babel/plugin-transform-classes": "^7.12.1", "@babel/plugin-transform-classes": "^7.12.1",
"@babel/plugin-transform-computed-properties": "^7.12.1", "@babel/plugin-transform-computed-properties": "^7.12.1",
"@babel/plugin-transform-destructuring": "^7.12.1", "@babel/plugin-transform-destructuring": "^7.12.1",
@@ -1255,17 +1270,27 @@
"@babel/plugin-transform-unicode-escapes": "^7.12.1", "@babel/plugin-transform-unicode-escapes": "^7.12.1",
"@babel/plugin-transform-unicode-regex": "^7.12.1", "@babel/plugin-transform-unicode-regex": "^7.12.1",
"@babel/preset-modules": "^0.1.3", "@babel/preset-modules": "^0.1.3",
"@babel/types": "^7.12.10", "@babel/types": "^7.12.11",
"core-js-compat": "^3.8.0", "core-js-compat": "^3.8.0",
"semver": "^5.5.0" "semver": "^5.5.0"
}, },
"dependencies": { "dependencies": {
"@babel/helper-validator-identifier": {
"version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
},
"@babel/helper-validator-option": {
"version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz",
"integrity": "sha512-TBFCyj939mFSdeX7U7DDj32WtzYY7fDcalgq8v3fBZMNOJQNn7nOYzMaUCiPxPYfCup69mtIpqlKgMZLvQ8Xhw=="
},
"@babel/types": { "@babel/types": {
"version": "7.12.10", "version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
"integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==", "integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
"requires": { "requires": {
"@babel/helper-validator-identifier": "^7.10.4", "@babel/helper-validator-identifier": "^7.12.11",
"lodash": "^4.17.19", "lodash": "^4.17.19",
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }

2
package.json
View File

@@ -46,7 +46,7 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.10", "@babel/preset-env": "^7.12.11",
"@nuxtjs/color-mode": "^2.0.2", "@nuxtjs/color-mode": "^2.0.2",
"@nuxtjs/google-analytics": "^2.4.0", "@nuxtjs/google-analytics": "^2.4.0",
"@nuxtjs/pwa": "^3.3.2", "@nuxtjs/pwa": "^3.3.2",