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>

122
components/history.vue
View File

@@ -1,7 +1,6 @@
<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"
@@ -10,61 +9,6 @@
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,9 +178,62 @@
<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>
</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>
<div class="flex-wrap" v-else>
<label for="clear-history-button">Are you sure?</label> <label for="clear-history-button">Are you sure?</label>
<div> <div>
<button <button
@@ -257,8 +254,7 @@
</button> </button>
</div> </div>
</div> </div>
</li> </div>
</ul>
</pw-section> </pw-section>
</template> </template>

2
pages/index.vue
View File

@@ -88,7 +88,6 @@
<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
@@ -104,7 +103,6 @@
</span> </span>
</button> </button>
</li> </li>
</div>
</ul> </ul>
<div <div
class="blue" class="blue"