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

♿ Improving accessibility

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-23 15:25:30 +05:30
parent edba562a99
commit 48e9171153
3 changed files with 87 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/collections/index.vue
View File

@@ -57,7 +57,7 @@ TODO:
> >
<i class="material-icons">import_export</i> <i class="material-icons">import_export</i>
</button> </button>
<a <!-- <a
href="https://github.com/liyasthomas/postwoman/wiki/Collections" href="https://github.com/liyasthomas/postwoman/wiki/Collections"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
@@ -65,7 +65,7 @@ TODO:
<button class="icon" v-tooltip="'Wiki'"> <button class="icon" v-tooltip="'Wiki'">
<i class="material-icons">help</i> <i class="material-icons">help</i>
</button> </button>
</a> </a> -->
</div> </div>
</div> </div>

144
components/history.vue
View File

@@ -1,70 +1,14 @@
<template> <template>
<pw-section class="green" icon="history" label="History" ref="history"> <pw-section class="green" icon="history" label="History" ref="history">
<ul> <ul>
<div class="show-on-large-screen"> <li id="filter-history">
<li id="filter-history"> <input
<input aria-label="Search"
aria-label="Search" type="text"
type="text" placeholder="search history"
placeholder="search history" v-model="filterText"
v-model="filterText" />
/> </li>
</li>
<v-popover>
<button class="tooltip-target icon" v-tooltip="'Sort'">
<i class="material-icons">sort</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="sort_by_label()" v-close-popover>
<i class="material-icons">sort_by_alpha</i>
<span>Label</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_time()" v-close-popover>
<i class="material-icons">access_time</i>
<span>Time</span>
</button>
</div>
<div>
<button
class="icon"
@click="sort_by_status_code()"
v-close-popover
>
<i class="material-icons">assistant</i>
<span>Status</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_url()" v-close-popover>
<i class="material-icons">language</i>
<span>URL</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_path()" v-close-popover>
<i class="material-icons">timeline</i>
<span>Path</span>
</button>
</div>
<div v-if="showMore">
<button class="icon" @click="sort_by_duration()" v-close-popover>
<i class="material-icons">timer</i>
<span>Duration</span>
</button>
</div>
<div>
<button class="icon" @click="toggleCollapse()">
<i class="material-icons" v-if="!showMore">first_page</i>
<i class="material-icons" v-else>last_page</i>
<span>{{ !showMore ? "Show more" : "Hide more" }}</span>
</button>
</div>
</template>
</v-popover>
</div>
</ul> </ul>
<virtual-list <virtual-list
class="virtual-list" class="virtual-list"
@@ -223,8 +167,8 @@
<label>History is empty</label> <label>History is empty</label>
</li> </li>
</ul> </ul>
<ul v-if="history.length !== 0"> <div v-if="history.length !== 0">
<li v-if="!isClearingHistory"> <div class="flex-wrap" v-if="!isClearingHistory">
<button <button
class="icon" class="icon"
id="clear-history-button" id="clear-history-button"
@@ -234,11 +178,64 @@
<i class="material-icons">clear_all</i> <i class="material-icons">clear_all</i>
<span>Clear All</span> <span>Clear All</span>
</button> </button>
</li> <v-popover>
<li v-else> <button class="tooltip-target icon" v-tooltip="'Sort'">
<div class="flex-wrap"> <i class="material-icons">sort</i>
<label for="clear-history-button">Are you sure?</label> </button>
<div> <template slot="popover">
<div>
<button class="icon" @click="sort_by_label()" v-close-popover>
<i class="material-icons">sort_by_alpha</i>
<span>Label</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_time()" v-close-popover>
<i class="material-icons">access_time</i>
<span>Time</span>
</button>
</div>
<div>
<button
class="icon"
@click="sort_by_status_code()"
v-close-popover
>
<i class="material-icons">assistant</i>
<span>Status</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_url()" v-close-popover>
<i class="material-icons">language</i>
<span>URL</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_path()" v-close-popover>
<i class="material-icons">timeline</i>
<span>Path</span>
</button>
</div>
<div v-if="showMore">
<button class="icon" @click="sort_by_duration()" v-close-popover>
<i class="material-icons">timer</i>
<span>Duration</span>
</button>
</div>
<div>
<button class="icon" @click="toggleCollapse()">
<i class="material-icons" v-if="!showMore">first_page</i>
<i class="material-icons" v-else>last_page</i>
<span>{{ !showMore ? "Show more" : "Hide more" }}</span>
</button>
</div>
</template>
</v-popover>
</div>
<div class="flex-wrap" v-else>
<label for="clear-history-button">Are you sure?</label>
<div>
<button <button
class="icon" class="icon"
id="confirm-clear-history-button" id="confirm-clear-history-button"
@@ -256,9 +253,8 @@
<i class="material-icons">close</i> <i class="material-icons">close</i>
</button> </button>
</div> </div>
</div> </div>
</li> </div>
</ul>
</pw-section> </pw-section>
</template> </template>

32
pages/index.vue
View File

@@ -88,23 +88,21 @@
<option value="Users"></option> <option value="Users"></option>
</datalist> </datalist>
</li> </li>
<div> <li>
<li> <label class="hide-on-small-screen" for="send">&nbsp;</label>
<label class="hide-on-small-screen" for="send">&nbsp;</label> <button
<button :disabled="!isValidURL"
:disabled="!isValidURL" @click="sendRequest"
@click="sendRequest" id="send"
id="send" ref="sendButton"
ref="sendButton" >
> Send
Send <span id="hidden-message">Again</span>
<span id="hidden-message">Again</span> <span>
<span> <i class="material-icons">send</i>
<i class="material-icons">send</i> </span>
</span> </button>
</button> </li>
</li>
</div>
</ul> </ul>
<div <div
class="blue" class="blue"