Skip to content

Commit

Permalink
Add popup options to the main options page
Browse files Browse the repository at this point in the history
  • Loading branch information
@simov
simov committed Feb 21, 2024
1 parent e776703 commit 358a7d3
Show file tree
Hide file tree
Showing 8 changed files with 360 additions and 274 deletions.
2 changes: 1 addition & 1 deletion build/bootstrap/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"description": "Markdown Viewer / Browser Extension",
"private": true,
"dependencies": {
"bootstrap": "5.2.3"
"bootstrap": "5.3.3"
},
"engines": {
"node": ">=18.0.0"
Expand Down
88 changes: 40 additions & 48 deletions options/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ main {
min-height: 52px;
}

.col-sm-12.m-overflow {
white-space: nowrap;
overflow: hidden;
}

.mdc-elevation--z2 {
box-shadow:
0 3px 1px -2px rgba(0,0,0,.2),
Expand All @@ -44,9 +49,6 @@ body.dark .navbar {
filter: invert(90%) hue-rotate(180deg);
background-color: transparent;
}
body.dark .navbar #menu > div {
filter: invert(100%) hue-rotate(180deg);
}
body.dark .m-select {
background-color: #c5c5c5;
}
Expand All @@ -63,9 +65,6 @@ body.dark .m-button {
filter: invert(90%) hue-rotate(180deg);
background-color: transparent;
}
body.auto .navbar #menu > div {
filter: invert(100%) hue-rotate(180deg);
}
body.auto .m-select {
background-color: #c5c5c5;
}
Expand Down Expand Up @@ -95,46 +94,12 @@ footer, #footer-push {
/*---------------------------------------------------------------------------*/
/*header menu*/

#menu {
position: relative;
.nav a,
.nav a:hover,
.nav a:visited,
.nav-underline .nav-link.active {
color: #fff;
}
#menu span {
font-size: 20px;
display: inline-block;
line-height: 60px;
padding: 0 20px;
}
#menu div {
position: absolute;
top: 68px;
right: 0;
z-index: 10;
width: 200px;
box-shadow:
0 3px 1px -2px rgba(0,0,0,.2),
0 2px 2px 0 rgba(0,0,0,.14),
0 1px 5px 0 rgba(0,0,0,.12);
}
#menu em {
display: block;
font-size: 20px;
line-height: 50px;
font-style: normal;
color: #333;
cursor: pointer;
padding: 0 20px;
background: #fff;
transition-duration: .28s;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-property: background-color box-shadow;
}
#menu em:hover {
background: #ececec;
}
#menu em.active {
background: #ececec;
}

/*---------------------------------------------------------------------------*/
/*scrollbar*/
Expand Down Expand Up @@ -229,10 +194,6 @@ footer, #footer-push {
padding: 9px 12px;
}

.bs-callout .m-select {
margin: 2px 20px 3px 10px;
}

/*---------------------------------------------------------------------------*/
/*misc*/

Expand Down Expand Up @@ -280,6 +241,37 @@ h4 {
float: right;
}

/*---------------------------------------------------------------------------*/
/*settings*/

.m-settings .m-label {
display: inline-block;
font-size: 1rem;
line-height: 1.5rem;
padding: 5px 0 5px 0;
}
.m-settings .m-select {
width: 100%;
margin-bottom: 20px;
}

.m-content .m-switch,
.m-compiler .m-switch {
width: 100%;
}

.m-compiler .scroll {
margin-top: 10px;
overflow-y: auto;
overflow-x: hidden;
}
.m-compiler .scroll.max {
height: 324px;
}

/*---------------------------------------------------------------------------*/
/*footer*/

footer {
text-align: center;
margin: 0 auto;
Expand Down
16 changes: 7 additions & 9 deletions options/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,11 @@
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container">
<a href="https://github.com/simov/markdown-viewer" class="navbar-brand">Markdown Viewer</a>
<a href="#" id="menu">
<span>☰</span>
<div class="hidden">
<em class="active">Origins</em>
<em>Settings</em>
<em>Help</em>
</div>
</a>
<ul class="nav nav-underline">
<li class="nav-item"><a href="#" class="nav-link active">Origins</a></li>
<li class="nav-item"><a href="#" class="nav-link">Settings</a></li>
<li class="nav-item"><a href="#" class="nav-link">Help</a></li>
</ul>
</div>
</nav>
<div class="container">
Expand All @@ -33,13 +30,14 @@
<footer>
<nav>
<a href="https://github.com/simov/markdown-viewer">GitHub</a> &bullet;
<a href="https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk">Chrome</a> &bullet;
<a href="https://chromewebstore.google.com/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk">Chrome</a> &bullet;
<a href="https://microsoftedge.microsoft.com/addons/detail/markdown-viewer/cgfmehpekedojlmjepoimbfcafopimdg">Edge</a> &bullet;
<a href="https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/">Firefox</a>
</nav>
</footer>
</body>
<script src="/options/origins.js" type="text/javascript" charset="utf-8"></script>
<script src="/options/settings.js" type="text/javascript" charset="utf-8"></script>
<script src="/popup/index.js" type="text/javascript" charset="utf-8"></script>
<script src="/options/index.js" type="text/javascript" charset="utf-8"></script>
</html>
13 changes: 4 additions & 9 deletions options/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@

var origins = Origins()
var settings = Settings()
var popup = Popup()

m.mount(document.querySelector('main'), {
view: () => [
origins.render(),
settings.render(),
popup.options(),
]
})

// header menu
document.querySelector('#menu span').addEventListener('click', (e) => {
document.querySelector('.nav').addEventListener('click', (e) => {
e.preventDefault()
document.querySelector('#menu div').classList.toggle('hidden')
})
document.querySelector('#menu div').addEventListener('click', (e) => {
e.preventDefault()
Array.from(document.querySelectorAll('#menu em')).forEach((link) => {
Array.from(document.querySelectorAll('.nav a')).forEach((link) => {
link.classList.remove('active')
})
if (e.target.innerText === 'Origins') {
Expand All @@ -32,5 +28,4 @@ document.querySelector('#menu div').addEventListener('click', (e) => {
else if (e.target.innerText === 'Help') {
window.location = 'https://github.com/simov/markdown-viewer#table-of-contents'
}
document.querySelector('#menu div').classList.add('hidden')
})
2 changes: 1 addition & 1 deletion options/origins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ var Origins = () => {
m('.bs-callout', {class: !state.permissions[origin] ? 'm-box-refresh' : undefined},
// origin
m('.row',
m('.col-xxl-8.col-xl-8.col-lg-8.col-md-7.col-sm-12', m('span.m-origin', origin)),
m('.col-xxl-8.col-xl-8.col-lg-8.col-md-7.col-sm-12 m-overflow', m('span.m-origin', origin)),
m('.col-xxl-4.col-xl-4.col-lg-4.col-md-5.col-sm-12',
// remove
(origin !== 'file://' || null) &&
Expand Down
70 changes: 28 additions & 42 deletions options/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,54 +44,40 @@ var Settings = () => {

var onupdate = {}

var render = () =>
m('.m-settings hidden',
m('.row',
m('h3', 'Settings')
var render = () => [
m('.row',
m('.col-xxl-6.col-xl-6.col-lg-6.col-md-6.col-sm-12',
m('span.m-label',
'Extension Icon'
)
),
// icon
m('.bs-callout',
m('.row',
m('.col-sm-12',
m('.overflow',
m('label.mdc-switch',
m('select.mdc-elevation--z2 m-select', {
onchange: events.icon
},
state._icons.map((icon) =>
m('option', {selected: state.icon === icon}, icon)
)
),
m('span.mdc-switch-label',
'Extension Icon and Content Favicon Color'
)
)
)
m('.col-xxl-6.col-xl-6.col-lg-6.col-md-6.col-sm-12',
m('select.mdc-elevation--z2 m-select', {
onchange: events.icon
},
state._icons.map((icon) =>
m('option', {selected: state.icon === icon}, icon)
)
)
),
// theme
m('.bs-callout',
m('.row',
m('.col-sm-12',
m('.overflow',
m('label.mdc-switch',
m('select.mdc-elevation--z2 m-select', {
onchange: events.theme
},
state._themes.map((theme) =>
m('option', {selected: state.theme === theme}, theme)
)
),
m('span.mdc-switch-label',
'Popup and Options Page Color Mode'
)
)
)
),
m('.row',
m('.col-xxl-6.col-xl-6.col-lg-6.col-md-6.col-sm-12',
m('span.m-label',
'Popup & Options Page'
)
),
m('.col-xxl-6.col-xl-6.col-lg-6.col-md-6.col-sm-12',
m('select.mdc-elevation--z2 m-select', {
onchange: events.theme
},
state._themes.map((theme) =>
m('option', {selected: state.theme === theme}, theme)
)
)
)
)
),
),
]

return {state, render}
}
2 changes: 1 addition & 1 deletion popup/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@
<script src="/vendor/mdc.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/vendor/mithril.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body></body>
<body class="is-popup"></body>
<script src="/popup/index.js" type="text/javascript" charset="utf-8"></script>
</html>
Loading

0 comments on commit 358a7d3

Please sign in to comment.