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

🎨 New vector icon buttons

Browse Source
This commit is contained in:
liyasthomas
2019-09-02 07:58:03 +05:30
parent 928545e7eb
commit aa1d3c6943
3 changed files with 52 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
assets/css/styles.scss
View File

@@ -78,6 +78,9 @@ body.sticky-footer footer {
}
button {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 4px;
padding: 8px 16px;
border-radius: 4px;
@@ -88,6 +91,16 @@ button {
cursor: pointer;
transition: all 0.2s ease-in-out;
&.icon {
background-color: var(--bg-color);
color: var(--ac-color);
fill: var(--ac-color);
span {
margin-left: 8px;
}
}
&:not([disabled]):hover,
&:not(.disabled):focus {
background-color: transparent;
@@ -231,6 +244,11 @@ input[type="checkbox"] {
background-color: var(--err-color);
color: #b2b2b2;
cursor: default;
&.icon {
color: #b2b2b2;
fill: #b2b2b2;
}
}
label {
@@ -258,6 +276,10 @@ ol li {
align-items: center;
}
.show-on-small-screen {
display: flex;
}
@media (max-width: $responsiveWidth) {
header div {
display: flex;
@@ -283,6 +305,10 @@ ol li {
.hide-on-small-screen {
display: none;
}
.show-on-small-screen {
display: inline-flex;
}
}
#installPWA {

28
components/history.vue
View File

@@ -25,18 +25,20 @@
<label :for="'path#'+index">Path</label>
<input :id="'path#'+index" type="text" readonly :value="entry.path">
</li>
<li>
<label :for="'delete-button#'+index" class="hide-on-small-screen">&nbsp;</label>
<button :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)">
Delete
</button>
</li>
<li>
<label :for="'use-button#'+index" class="hide-on-small-screen">&nbsp;</label>
<button :id="'use-button#'+index" :disabled="isClearingHistory" @click="useHistory(entry)">
Use
</button>
</li>
<div class="show-on-small-screen">
<li>
<label :for="'delete-button#'+index" class="hide-on-small-screen">&nbsp;</label>
<button class="icon" :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.662 23l-5.369-5.365c-.195-.195-.293-.45-.293-.707 0-.256.098-.512.293-.707l14.929-14.928c.195-.194.451-.293.707-.293.255 0 .512.099.707.293l7.071 7.073c.196.195.293.451.293.708 0 .256-.097.511-.293.707l-11.216 11.219h5.514v2h-12.343zm3.657-2l-5.486-5.486-1.419 1.414 4.076 4.072h2.829zm6.605-17.581l-10.677 10.68 5.658 5.659 10.676-10.682-5.657-5.657z"/></svg>
</button>
</li>
<li>
<label :for="'use-button#'+index" class="hide-on-small-screen">&nbsp;</label>
<button class="icon" :id="'use-button#'+index" :disabled="isClearingHistory" @click="useHistory(entry)">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.078 7.061l2.861 2.862-10.799 10.798-3.584.723.724-3.585 10.798-10.798zm0-2.829l-12.64 12.64-1.438 7.128 7.127-1.438 12.642-12.64-5.691-5.69zm7.105 4.277l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z"/></svg>
</button>
</li>
</div>
</ul>
</virtual-list>
<ul :class="{hidden: filteredHistory.length != 0 || history.length === 0 }">
@@ -47,7 +49,7 @@
<ul>
<li v-if="!isClearingHistory">
<button id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">
Clear History
Clear all
</button>
</li>
<li v-else>

13
pages/index.vue
View File

@@ -22,6 +22,13 @@
<label for="path">Path</label>
<input @keyup.enter="isValidURL ? sendRequest() : null" id="path" v-model="path">
</li>
<li>
<label class="hide-on-small-screen" for="copyRequest">&nbsp;</label>
<button class="icon" @click="copyRequest" name="copyRequest" :disabled="!isValidURL">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z"/></svg>
<span>Share URL</span>
</button>
</li>
<li>
<label class="hide-on-small-screen" for="action">&nbsp;</label>
<button :disabled="!isValidURL" @click="sendRequest" class="show" id="action" name="action" ref="sendButton">
@@ -92,8 +99,10 @@
<div class="flex-wrap">
<label for="body">response</label>
<div>
<button class="block" @click="copyRequest" name="copyRequest" v-if="isValidURL">Copy Request URL</button>
<button @click="copyResponse" name="copyResponse" v-if="response.body">Copy Response</button>
<button class="icon" @click="copyResponse" name="copyResponse" v-if="response.body">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z"/></svg>
<span>Copy</span>
</button>
</div>
</div>
<div id="response-details-wrapper">