Skip to content

Commit 01dca8e

Browse files
qoomonqoomon
committed
feat: add primaryColor config option
1 parent 2d4bb38 commit 01dca8e

File tree

1 file changed

+34
-28
lines changed

1 file changed

+34
-28
lines changed

‎index.html‎

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
subtitle: 'made with ♥ by qoomon',
1111
logo: 'https://qoomon.github.io/aws-s3-bucket-browser/logo.png',
1212
favicon: 'https://qoomon.github.io/aws-s3-bucket-browser/favicon.ico',
13+
primaryColor: '#167df0',
1314

1415
bucketUrl: undefined,
1516
// If bucketUrl is undefined, this script tries to determine bucket Rest API URL from this file location itself.
@@ -50,8 +51,8 @@
5051
<script src="https://unpkg.com/[email protected]/min/moment.min.js" integrity="sha384-Uz1UHyakAAz121kPY0Nx6ZGzYeUTy9zAtcpdwVmFCEwiTGPA2K6zSGgkKJEQfMhK" crossorigin="anonymous"></script>
5152
</head>
5253

53-
<body>
54-
<div id="app" v-cloak>
54+
<body >
55+
<div id="app" v-cloak :style="cssVars">
5556
<!-- Header -->
5657
<div class="level">
5758
<div class="level-left" style="display: flex;">
@@ -71,31 +72,31 @@ <h2 class="subtitle">{{config.subtitle}}</h2>
7172
<!-- Prefix Breadcrumps -->
7273
<div class="buttons is-pulled-left">
7374
<b-button v-for="(breadcrump, index) in pathBreadcrumps" v-bind:key="breadcrump.url"
74-
type="is-info" rounded
75+
type="is-primary" rounded
7576
tag="a"
7677
:href="breadcrump.url"
7778
icon-pack="fas"
7879
:icon-left="index == 0 ? 'folder' : ''"
7980
target=""
8081
:style="{ fontWeight: index == 0 ? 'bolder': ''}"
82+
style="white-space: pre;"
8183
>
82-
<template v-if="index == 0">/</template>
83-
<template v-else="index > 0">{{breadcrump.name}}</template>
84+
<template>{{index > 0 ? breadcrump.name : '/'}}</template>
8485
</b-button>
8586
</div>
8687
<!-- Paginating Buttons -->
8788
<div v-show="nextContinuationToken || previousContinuationTokens.length > 0"
8889
class="buttons is-pulled-right">
8990
<b-button
90-
type="is-info" rounded
91+
type="is-primary" rounded
9192
icon-pack="fas"
9293
icon-left="angle-left"
9394
@click="previousPage"
9495
:disabled="previousContinuationTokens.length === 0"
9596
>
9697
</b-button>
9798
<b-button
98-
type="is-info" rounded
99+
type="is-primary" rounded
99100
icon-pack="fas"
100101
icon-right="angle-right"
101102
@click="nextPage"
@@ -123,21 +124,22 @@ <h2 class="subtitle">{{config.subtitle}}</h2>
123124
<b-icon
124125
pack="far"
125126
:icon="props.row.type === 'prefix' ? 'folder' : 'file-alt'"
126-
style="margin-right: 1rem;"
127+
style="margin-right: 0.5rem;"
127128
>
128129
</b-icon>
129130
<b-button
130-
type="is-info is-text" inverted rounded
131+
type="is-text" rounded
131132
tag="a"
132-
:href="props.row.type === 'content' ? props.row.url : `#${props.row.prefix}`"
133-
style="text-align: left;"
133+
:href="props.row.type === 'content' ? props.row.url : `#${props.row.prefix}`"
134+
@click="document.activeElement.blur()"
135+
style="white-space: pre;"
134136
>
135-
{{ props.row.name }}
137+
<template>{{ props.row.name }}</template>
136138
</b-button>
137139
</div>
138140
<b-button
139141
v-if="props.row.installUrl"
140-
type="is-info" rounded
142+
type="is-primary" rounded
141143
tag="a"
142144
:href="props.row.installUrl"
143145
style="margin-left: 0.5rem; height: 1.7rem; padding: 12px;"
@@ -196,15 +198,15 @@ <h2 class="subtitle">{{config.subtitle}}</h2>
196198
<div v-show="nextContinuationToken || previousContinuationTokens.length > 0"
197199
class="buttons is-pulled-right">
198200
<b-button
199-
type="is-info" rounded
201+
type="is-primary" rounded
200202
icon-pack="fas"
201203
icon-left="angle-left"
202204
@click="previousPage"
203205
:disabled="previousContinuationTokens.length === 0"
204206
>
205207
</b-button>
206208
<b-button
207-
type="is-info" rounded
209+
type="is-primary" rounded
208210
icon-pack="fas"
209211
icon-right="angle-right"
210212
@click="nextPage"
@@ -304,6 +306,11 @@ <h2 class="subtitle">{{config.subtitle}}</h2>
304306
windowWidth: window.innerWidth
305307
},
306308
computed: {
309+
cssVars() {
310+
return {
311+
'--primary-color': this.config.primaryColor
312+
}
313+
},
307314
pathBreadcrumps() {
308315
return `/${this.pathPrefix}`.match(/(?=[/])|[^/]+[/]?/g)
309316
.map((pathPrefixPart, index, pathPrefixParts) => ({
@@ -498,7 +505,7 @@ <h2 class="subtitle">{{config.subtitle}}</h2>
498505
})
499506
</script>
500507

501-
<style scoped>
508+
<style scoped>
502509
body {
503510
width: 100vw;
504511
min-height: 100vh;
@@ -507,22 +514,22 @@ <h2 class="subtitle">{{config.subtitle}}</h2>
507514
background-color: #f5f5f5;
508515
overflow-y: auto;
509516
}
510-
517+
511518
.button.is-primary {
512-
background-color: #167df0 !important;
513-
border-color: transparent !important;
514-
color: #fff !important;
519+
background-color: var(--primary-color) !important;
515520
}
516-
517521
.button.is-text {
522+
padding: 0 !important;
518523
height: auto !important;
519-
user-select: text !important;
520-
box-shadow: none !important;
521-
white-space: unset !important;
522-
background: none !important;
523-
background-color: transparent !important;
524524
text-decoration: none !important;
525-
padding: 0 !important;
525+
box-shadow: none !important;
526+
background-color: unset !important;
527+
user-select: text !important;
528+
color: var(--primary-color) !important;
529+
font-weight: 500;
530+
}
531+
.button.is-text:focus {
532+
font-weight: bold;
526533
}
527534

528535
.name-column-details {
@@ -544,7 +551,6 @@ <h2 class="subtitle">{{config.subtitle}}</h2>
544551
text-align: center;
545552
color: darkgray;
546553
}
547-
548554
.footer-bucket-url a {
549555
color: inherit;
550556
}

0 commit comments

Comments
 (0)