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

⚡ Better icons, buttons & animations

Browse Source
This commit is contained in:
liyasthomas
2019-09-22 02:01:07 +05:30
parent 2878207170
commit 4bb6981cbb
10 changed files with 21 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/history.vue
View File

@@ -2,7 +2,7 @@
<pw-section class="gray" label="History">
<ul>
<li id="filter-history">
<input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0 || isClearingHistory" v-model="filterText">
<input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0" v-model="filterText">
</li>
</ul>
<ul>
@@ -36,14 +36,14 @@
</li>
<div class="show-on-small-screen">
<li>
<button class="icon" :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)" aria-label="Delete">
<button class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M5.633 22.031c1.135 1.313 3.735 1.969 6.334 1.969 2.601 0 5.199-.656 6.335-1.969.081-.404 3.698-18.468 3.698-18.882 0-2.473-7.338-3.149-10-3.149-4.992 0-10 1.242-10 3.144 0 .406 3.556 18.488 3.633 18.887zm6.418-16.884c-4.211 0-7.625-.746-7.625-1.667s3.414-1.667 7.625-1.667 7.624.746 7.624 1.667-3.413 1.667-7.624 1.667z"/>
</svg>
</button>
</li>
<li>
<button class="icon" :id="'use-button#'+index" :disabled="isClearingHistory" @click="useHistory(entry)" aria-label="Edit">
<button class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M19.769 9.923l-12.642 12.639-7.127 1.438 1.438-7.128 12.641-12.64 5.69 5.691zm1.414-1.414l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z"/>
</svg>

4
components/modal.vue
View File

@@ -25,7 +25,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
@@ -69,6 +69,6 @@
.modal-fade-enter .modal-container,
.modal-fade-leave-active .modal-container {
transform: scale(0.9);
transition: all .2s ease;
transition: all 0.1s ease-in-out;
}
</style>

12
components/settings/swatch.vue
View File

@@ -2,7 +2,7 @@
<div class="color" :data-color="color">
<span :style="{backgroundColor: color}" class="preview">
<svg v-if="active" class="activeTick" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
<circle cx="12" cy="12" r="12"/>
</svg>
</span>
{{ name || color }}
@@ -14,13 +14,13 @@
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 8px;
padding: 0 16px 0 4px;
margin: 4px;
background-color: var(--brd-color);
background-color: var(--bg-dark-color);
color: var(--fg-color);
border-radius: 8px;
border-radius: 20px;
cursor: pointer;
height: 41px;
height: 40px;
&.active {
background-color: var(--bg-dark-color);
@@ -46,7 +46,7 @@
.color.vibrant {
.preview .activeTick {
fill: #000;
fill: var(--act-color);
}
}
</style>