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

🎨 Updated flex UI

Browse Source
This commit is contained in:
Liyas Thomas
2020-06-19 15:29:14 +05:30
parent 62dfb582f4
commit e45a185c40
3 changed files with 24 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/styles.scss
View File

@@ -149,6 +149,8 @@ footer {
nav.primary-nav { nav.primary-nav {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center;
justify-content: center;
svg { svg {
fill: var(--fg-light-color); fill: var(--fg-light-color);
@@ -192,6 +194,8 @@ nav.primary-nav {
nav.secondary-nav { nav.secondary-nav {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center;
justify-content: center;
border-top: 2px dashed var(--brd-color); border-top: 2px dashed var(--brd-color);
margin-top: 4px; margin-top: 4px;

121
components/layout/sidenav.vue
View File

@@ -26,113 +26,20 @@
v-tooltip.right="$t('graphql')" v-tooltip.right="$t('graphql')"
:aria-label="$t('graphql')" :aria-label="$t('graphql')"
> >
<svg <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 29.999 30">
class="material-icons" <path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" />
version="1.1" <path d="M2.727 20.53h24.538v1.272H2.727z" />
xmlns="http://www.w3.org/2000/svg" <path
x="0px" d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"
y="0px" />
viewBox="0 0 400 400" <path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z" />
> <path
<g> d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"
<g> />
<g> <path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z" />
<rect <path
x="122" d="M27.985 22.5a2.68 2.68 0 0 1-3.654.981 2.68 2.68 0 0 1-.981-3.654 2.68 2.68 0 0 1 3.654-.981c1.287.743 1.724 2.375.98 3.654M6.642 10.174a2.68 2.68 0 0 1-3.654.981A2.68 2.68 0 0 1 2.007 7.5a2.68 2.68 0 0 1 3.654-.981 2.68 2.68 0 0 1 .981 3.654M2.015 22.5a2.68 2.68 0 0 1 .981-3.654 2.68 2.68 0 0 1 3.654.981 2.68 2.68 0 0 1-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 0 1 .981-3.654 2.68 2.68 0 0 1 3.654.981 2.68 2.68 0 0 1-.981 3.654 2.68 2.68 0 0 1-3.654-.981M15 30a2.674 2.674 0 1 1 2.674-2.673A2.68 2.68 0 0 1 15 30m0-24.652a2.67 2.67 0 0 1-2.674-2.674 2.67 2.67 0 1 1 5.347 0A2.67 2.67 0 0 1 15 5.347"
y="-0.4" />
transform="matrix(-0.866 -0.5 0.5 -0.866 163.3196 363.3136)"
width="16.6"
height="320.3"
/>
</g>
</g>
<g>
<g>
<rect x="39.8" y="272.2" width="320.3" height="16.6" />
</g>
</g>
<g>
<g>
<rect
x="37.9"
y="312.2"
transform="matrix(-0.866 -0.5 0.5 -0.866 83.0693 663.3409)"
width="185"
height="16.6"
/>
</g>
</g>
<g>
<g>
<rect
x="177.1"
y="71.1"
transform="matrix(-0.866 -0.5 0.5 -0.866 463.3409 283.0693)"
width="185"
height="16.6"
/>
</g>
</g>
<g>
<g>
<rect
x="122.1"
y="-13"
transform="matrix(-0.5 -0.866 0.866 -0.5 126.7903 232.1221)"
width="16.6"
height="185"
/>
</g>
</g>
<g>
<g>
<rect
x="109.6"
y="151.6"
transform="matrix(-0.5 -0.866 0.866 -0.5 266.0828 473.3766)"
width="320.3"
height="16.6"
/>
</g>
</g>
<g>
<g><rect x="52.5" y="107.5" width="16.6" height="185" /></g>
</g>
<g>
<g>
<rect x="330.9" y="107.5" width="16.6" height="185" />
</g>
</g>
<g>
<g>
<rect
x="262.4"
y="240.1"
transform="matrix(-0.5 -0.866 0.866 -0.5 126.7953 714.2875)"
width="14.5"
height="160.9"
/>
</g>
</g>
<path
d="M369.5,297.9c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8C373.5,259.9,379.2,281.2,369.5,297.9"
/>
<path
d="M90.9,137c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8C94.8,99,100.5,120.3,90.9,137"
/>
<path
d="M30.5,297.9c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7C61.4,320.3,40.1,314.6,30.5,297.9"
/>
<path
d="M309.1,137c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7C340.1,159.4,318.7,153.7,309.1,137"
/>
<path
d="M200,395.8c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9C234.9,380.1,219.3,395.8,200,395.8"
/>
<path
d="M200,74c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9C234.9,58.4,219.3,74,200,74"
/>
</g>
</svg> </svg>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link

8
pages/index.vue
View File

@@ -283,11 +283,12 @@
<input ref="payload" name="payload" type="file" @change="uploadPayload" /> <input ref="payload" name="payload" type="file" @change="uploadPayload" />
<button <button
class="icon" class="icon"
@click="prettifyRequestBody()" ref="prettifyRequest"
@click="prettifyRequestBody"
v-tooltip="$t('prettify_body')" v-tooltip="$t('prettify_body')"
v-if="rawInput && this.contentType.endsWith('json')" v-if="rawInput && this.contentType.endsWith('json')"
> >
<i class="material-icons">notes</i> <i class="material-icons">photo_filter</i>
</button> </button>
</div> </div>
</div> </div>
@@ -2395,6 +2396,9 @@ export default {
try { try {
const jsonObj = JSON.parse(this.rawParams) const jsonObj = JSON.parse(this.rawParams)
this.rawParams = JSON.stringify(jsonObj, null, 2) this.rawParams = JSON.stringify(jsonObj, null, 2)
let oldIcon = this.$refs.prettifyRequest.innerHTML
this.$refs.prettifyRequest.innerHTML = this.doneButton
setTimeout(() => (this.$refs.prettifyRequest.innerHTML = oldIcon), 1000)
} catch (e) { } catch (e) {
this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, { this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
icon: "error", icon: "error",