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

Merge branch 'master' into i18n

Browse Source
This commit is contained in:
Liyas Thomas
2019-12-01 03:29:29 +05:30
committed by GitHub
parent d9f0e61375 d0aa75c792
commit 395d244e04
14 changed files with 297 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@@ -181,19 +181,19 @@ _Requests with Pre-Request Scripts are indicated in History entries_
🌎 **i18n**: Internationalization β.
- Add a new locale in `lang/`
- Ex: `lang/es-ES.js`
Ex: `lang/es-ES.js`
- Mention `code`, `name`, `iso` and `file` in `nuxt.config.js`
```
i18n: {
locales: [{
Ex:
```
i18n: {
locales: [{
code: 'es',
name: 'Español',
iso: 'es-ES',
file: 'es-ES.js'
}]
}
```
}
```
_**All contributions are welcome to `i18n` [branch](https://github.com/liyasthomas/postwoman/tree/i18n) only!**_

12
assets/css/fonts.scss
View File

@@ -14,6 +14,8 @@
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
height: 24px;
width: 24px;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
@@ -24,6 +26,7 @@
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
font-feature-settings: "liga";
}
/* poppins-500 - latin */
@@ -35,7 +38,8 @@
src: local("Poppins Medium"), local("Poppins-Medium"),
url("~assets/fonts/poppins-v9-latin-500.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~assets/fonts/poppins-v9-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url("~assets/fonts/poppins-v9-latin-500.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-700 - latin */
@@ -47,7 +51,8 @@
src: local("Poppins Bold"), local("Poppins-Bold"),
url("~assets/fonts/poppins-v9-latin-700.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~assets/fonts/poppins-v9-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url("~assets/fonts/poppins-v9-latin-700.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-mono-regular - latin */
@@ -59,5 +64,6 @@
src: local("Roboto Mono"), local("RobotoMono-Regular"),
url("~assets/fonts/roboto-mono-v7-latin-regular.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~assets/fonts/roboto-mono-v7-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url("~assets/fonts/roboto-mono-v7-latin-regular.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

36
assets/css/styles.scss
View File

@@ -1,22 +1,14 @@
// Layout transitions
.page-enter-active,
.page-leave-active,
.layout-enter-active,
.layout-leave-active {
transition: opacity 0.5s;
}
.layout-enter,
.layout-leave-active {
opacity: 0;
}
// Page transitions
.page-enter-active,
.page-leave-active {
transition: opacity 0.5s;
transition: all 0.2s ease-in-out;
}
.page-enter,
.page-leave-to {
.page-leave-active,
.layout-enter,
.layout-leave-active {
opacity: 0;
}
@@ -79,7 +71,6 @@ body {
// Make theme transition smoother.
body.afterLoad {
&,
& * {
transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
@@ -98,7 +89,7 @@ a {
header,
footer {
&>div {
& > div {
display: flex;
padding: 16px;
width: 100%;
@@ -194,11 +185,13 @@ nav.primary-nav {
border-radius: 50%;
background-color: var(--brd-color);
color: var(--fg-light-color);
fill: var(--fg-light-color);
margin: 8px;
transition: all 0.2s ease-in-out;
&:hover {
color: var(--fg-color);
fill: var(--fg-color);
svg {
fill: var(--fg-color);
@@ -208,6 +201,7 @@ nav.primary-nav {
&.nuxt-link-exact-active {
background-color: var(--ac-color);
color: var(--act-color);
fill: var(--act-color);
border-radius: 16px;
svg {
@@ -548,7 +542,7 @@ input[type="checkbox"] {
display: none;
&,
&+label {
& + label {
vertical-align: middle;
cursor: pointer;
@@ -567,7 +561,7 @@ input[type="checkbox"] {
}
}
&:checked+label:before {
&:checked + label:before {
background-color: var(--ac-color);
border-color: var(--ac-color);
color: var(--act-color);
@@ -734,7 +728,7 @@ input[type="radio"],
display: none;
}
input[type="radio"]+label {
input[type="radio"] + label {
padding: 8px 16px;
border-bottom: 2px solid transparent;
cursor: pointer;
@@ -747,12 +741,12 @@ input[type="radio"]+label {
}
}
input[type="radio"]:checked+label {
input[type="radio"]:checked + label {
border-color: var(--fg-color);
color: var(--fg-color);
}
input[type="radio"]:checked+label+.tab {
input[type="radio"]:checked + label + .tab {
display: block;
}

4
assets/css/themes.scss
View File

@@ -33,7 +33,7 @@
@include darkTheme;
}
@media(prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
:root.auto {
@include darkTheme;
}
@@ -65,7 +65,7 @@
@include lightTheme;
}
@media(prefers-color-scheme: light) {
@media (prefers-color-scheme: light) {
:root.auto {
@include lightTheme;
}

8
components/ace-editor.vue
View File

@@ -60,10 +60,16 @@ export default {
...this.options
});
editor.setValue(this.value);
if (this.value) editor.setValue(this.value, 1);
this.editor = editor;
this.cacheValue = this.value;
editor.on('change', () => {
const content = editor.getValue();
this.$emit("input", content);
this.cacheValue = content;
});
},
methods: {

126
layouts/default.vue
View File

@@ -111,8 +111,116 @@
:to="localePath('graphql')"
:class="linkActive('/graphql')"
v-tooltip.right="$t('graphql')"
aria-label="GraphQL"
>
<i class="material-icons">cloud</i>
<svg
class="material-icons"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 400 400"
>
<g>
<g>
<g>
<rect
x="122"
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>
</nuxt-link>
<nuxt-link
:to="localePath('settings')"
@@ -165,11 +273,21 @@
<ul>
<li>
<a href="#endpoint" v-tooltip.right="$t('endpoint')">
<i class="material-icons">cloud_upload</i>
<i class="material-icons">cloud</i>
</a>
</li>
<li>
<a href="#schema" v-tooltip.right="$t('schema')">
<i class="material-icons">assignment_returned</i>
</a>
</li>
<li>
<a href="#query" v-tooltip.right="$t('query')">
<i class="material-icons">cloud_upload</i>
</a>
</li>
<li>
<a href="#response" v-tooltip.right="$t('response')">
<i class="material-icons">cloud_download</i>
</a>
</li>
@@ -193,9 +311,7 @@
</nav>
</div>
</aside>
<transition name="layout" appear>
<nuxt id="main" class="main" />
</transition>
<nuxt id="main" class="main" />
<aside class="nav-second"></aside>
</div>
</div>

12
package-lock.json generated
View File

@@ -3682,9 +3682,9 @@
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
},
"cypress": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/cypress/-/cypress-3.6.1.tgz",
"integrity": "sha512-6n0oqENdz/oQ7EJ6IgESNb2M7Bo/70qX9jSJsAziJTC3kICfEMmJUlrAnP9bn+ut24MlXQST5nRXhUP5nRIx6A==",
"version": "3.7.0",
"resolved": "https://registry.npmjs.org/cypress/-/cypress-3.7.0.tgz",
"integrity": "sha512-o+vfRxqAba8TduelzfZQ4WHmj2yNEjaoO2EuZ8dZ9pJpuW+WGtBGheKIp6zkoQsp8ZgFe8OoHh1i2mY8BDnMAw==",
"dev": true,
"requires": {
"@cypress/listr-verbose-renderer": "0.4.1",
@@ -11154,9 +11154,9 @@
"integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
},
"vuex-persist": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/vuex-persist/-/vuex-persist-2.1.1.tgz",
"integrity": "sha512-FD/l3M5b2y3r/zerE/IV7EmWAq03g/t5uKboLD3dB+8hyTAQztX+rqNvbJqBJ3aOcccIrkvEmyvwgOW9QM/LPg==",
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/vuex-persist/-/vuex-persist-2.2.0.tgz",
"integrity": "sha512-o/qbBeMcKZZqMvCXc7kfIew/5cjHxlP1f53rx5YYp3r2tk2kxXYK/UZumxKn7OXywlurl2r0mgkuBzH6nIWFjw==",
"requires": {
"flatted": "^2.0.0",
"lodash.merge": "^4.6.2"

4
package.json
View File

@@ -32,11 +32,11 @@
"v-tooltip": "^2.0.2",
"vue-virtual-scroll-list": "^1.4.3",
"vuejs-auto-complete": "^0.9.0",
"vuex-persist": "^2.1.1",
"vuex-persist": "^2.2.0",
"yargs-parser": "^16.1.0"
},
"devDependencies": {
"cypress": "^3.6.1",
"cypress": "^3.7.0",
"node-sass": "^4.13.0",
"sass-loader": "^7.3.1",
"start-server-and-test": "^1.10.6"

41
pages/graphql.vue
View File

@@ -171,11 +171,17 @@
</button>
</div>
</div>
<textarea
id="gqlQuery"
rows="8"
v-model="gqlQueryString">
></textarea>
<Editor
v-model="gqlQueryString"
:options="{
maxLines: responseBodyMaxLines,
minLines: '16',
fontSize: '16px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false
}"
/>
</pw-section>
<pw-section class="purple" label="Response" ref="response">
<div class="flex-wrap">
@@ -216,9 +222,9 @@
name="side"
checked="checked"
/>
<label v-if="queryFields.length > 0" for="queries-tab"
>{{ $t("queries") }}</label
>
<label v-if="queryFields.length > 0" for="queries-tab">
{{ $t("queries") }}
</label>
<div v-if="queryFields.length > 0" class="tab">
<div v-for="field in queryFields" :key="field.name">
<gql-field :gqlField="field" />
@@ -232,9 +238,9 @@
name="side"
checked="checked"
/>
<label v-if="mutationFields.length > 0" for="mutations-tab"
>{{ $t("mutations") }}</label
>
<label v-if="mutationFields.length > 0" for="mutations-tab">
{{ $t("mutations") }}
</label>
<div v-if="mutationFields.length > 0" class="tab">
<div v-for="field in mutationFields" :key="field.name">
<gql-field :gqlField="field" />
@@ -248,9 +254,9 @@
name="side"
checked="checked"
/>
<label v-if="subscriptionFields.length > 0" for="subscriptions-tab"
>{{ $t("subscriptions") }}</label
>
<label v-if="subscriptionFields.length > 0" for="subscriptions-tab">
{{ $t("subscriptions") }}
</label>
<div v-if="subscriptionFields.length > 0" class="tab">
<div v-for="field in subscriptionFields" :key="field.name">
<gql-field :gqlField="field" />
@@ -264,7 +270,9 @@
name="side"
checked="checked"
/>
<label v-if="gqlTypes.length > 0" for="gqltypes-tab">{{ $t("types") }}</label>
<label v-if="gqlTypes.length > 0" for="gqltypes-tab">
{{ $t("types") }}
</label>
<div v-if="gqlTypes.length > 0" class="tab">
<div v-for="type in gqlTypes" :key="type.name">
<gql-type :gqlType="type" />
@@ -435,7 +443,7 @@ export default {
: res;
this.responseString = JSON.stringify(data.data, null, 2);
this.$nuxt.$loading.finish();
const duration = Date.now() - startTime;
this.$toast.info(`Finished in ${duration}ms`, {
@@ -449,7 +457,6 @@ export default {
});
console.log("Error", error);
}
},
async getSchema() {
const startTime = Date.now();

37
pages/index.vue
View File

@@ -24,14 +24,18 @@
</a>
</div>
</div>
<textarea
id="preRequestScript"
@keydown="formatRawParams"
rows="8"
<Editor
v-model="preRequestScript"
spellcheck="false"
placeholder="pw.env.set('variable', 'value');"
></textarea>
:lang="'javascript'"
:options="{
maxLines: responseBodyMaxLines,
minLines: '16',
fontSize: '16px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false
}"
/>
</li>
</ul>
</pw-section>
@@ -126,10 +130,10 @@
<li>
<div class="flex-wrap">
<span>
<pw-toggle :on="rawInput" @change="rawInput = $event"
>{{ $t("raw_input") }}
{{ rawInput ? $t("enabled") : $t("disabled") }}</pw-toggle
>
<pw-toggle :on="rawInput" @change="rawInput = $event">
{{ $t("raw_input") }}
{{ rawInput ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</span>
<div>
<label for="payload">
@@ -392,8 +396,9 @@
<pw-toggle
:on="!urlExcludes.auth"
@change="setExclude('auth', !$event)"
>{{ $t("include_in_url") }}</pw-toggle
>
{{ $t("include_in_url") }}
</pw-toggle>
</div>
</pw-section>
</div>
@@ -625,7 +630,7 @@
</div>
</div>
<div id="response-details-wrapper">
<ResponseBody
<Editor
:value="responseBodyText"
:lang="responseBodyType"
:options="{
@@ -859,13 +864,13 @@ export default {
autocomplete: () => import("../components/autocomplete"),
collections: () => import("../components/collections"),
saveRequestAs: () => import("../components/collections/saveRequestAs"),
ResponseBody: AceEditor
Editor: AceEditor
},
data() {
return {
showModal: false,
showPreRequestScript: false,
preRequestScript: "",
preRequestScript: "// pw.env.set('variable', 'value');",
copyButton: '<i class="material-icons">file_copy</i>',
downloadButton: '<i class="material-icons">get_app</i>',
doneButton: '<i class="material-icons">done</i>',
@@ -2029,7 +2034,7 @@ export default {
} else if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.copyRequest();
} else if (e.key === "l" && (e.ctrlKey || e.metaKey)) {
} else if (e.key === "j" && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.$refs.clearAll.click();
}

21
pages/settings.vue
View File

@@ -46,11 +46,12 @@
<pw-toggle
:on="settings.FRAME_COLORS_ENABLED"
@change="toggleSetting('FRAME_COLORS_ENABLED')"
>{{ $t("multi_color") }}
>
{{ $t("multi_color") }}
{{
settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled")
}}</pw-toggle
>
}}
</pw-toggle>
</span>
</li>
</ul>
@@ -64,11 +65,10 @@
<pw-toggle
:on="settings.PROXY_ENABLED"
@change="toggleSetting('PROXY_ENABLED')"
>{{ $t("proxy") }}
{{
settings.PROXY_ENABLED ? $t("enabled") : $t("disabled")
}}</pw-toggle
>
{{ $t("proxy") }}
{{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</span>
<a
href="https://github.com/liyasthomas/postwoman/wiki/Proxy"
@@ -108,11 +108,8 @@
{{ $t("postwoman_official_proxy_hosting") }}
<br />
{{ $t("read_the") }}
<a
href="https://apollotv.xyz/legal"
target="_blank"
rel="noopener"
>{{ $t("apollotv_privacy_policy") }}</a
<a href="https://apollotv.xyz/legal" target="_blank" rel="noopener">
{{ $t("apollotv_privacy_policy") }} </a
>.
</p>
</li>

74
static/icons/graphql.svg Normal file
View File

@@ -0,0 +1,74 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 400 400">
<g>
<g>
<g>
<rect x="122" y="-0.4" transform="matrix(-0.866 -0.5 0.5 -0.866 163.3196 363.3136)" fill="#FFFFFF" width="16.6"
height="320.3"/>
</g>
</g>
<g>
<g>
<rect x="39.8" y="272.2" fill="#FFFFFF" 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)" fill="#FFFFFF" 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)" fill="#FFFFFF" 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)" fill="#FFFFFF" 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)" fill="#FFFFFF"
width="320.3" height="16.6"/>
</g>
</g>
<g>
<g>
<rect x="52.5" y="107.5" fill="#FFFFFF" width="16.6" height="185"/>
</g>
</g>
<g>s
<g>
<rect x="330.9" y="107.5" fill="#FFFFFF" 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)" fill="#FFFFFF"
width="14.5" height="160.9"/>
</g>
</g>
<path fill="#FFFFFF" 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.8
C373.5,259.9,379.2,281.2,369.5,297.9"/>
<path fill="#FFFFFF" 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.8
C94.8,99,100.5,120.3,90.9,137"/>
<path fill="#FFFFFF" 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.7
C61.4,320.3,40.1,314.6,30.5,297.9"/>
<path fill="#FFFFFF" 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.7
C340.1,159.4,318.7,153.7,309.1,137"/>
<path fill="#FFFFFF" 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.9
C234.9,380.1,219.3,395.8,200,395.8"/>
<path fill="#FFFFFF" 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.9
C234.9,58.4,219.3,74,200,74"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/images/screenshot1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 121 KiB

After

Width:  |  Height:  |  Size: 143 KiB

BIN
static/images/screenshot2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 145 KiB

After

Width:  |  Height:  |  Size: 154 KiB