Skip to content

Commit

Permalink
Browse button improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@caronc
caronc committed Mar 16, 2024
1 parent 4fd168e commit 8cba2b4
Show file tree
Hide file tree
Showing 4 changed files with 1,463 additions and 65 deletions.
61 changes: 52 additions & 9 deletions apprise_api/api/templates/config.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,16 +253,23 @@ <h4>{% trans "Persistent Store Endpoints" %}</h4>
}
});

// our GET parameters
var tagRe = new RegExp('[^[A-Za-z0-9_-]+');
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
if (params.tag) {
params.tag.split(tagRe).forEach(function (tag, index) {
M.Chips.getInstance(chipElement).addChip({tag: tag, image: ''});
});
// our GET parameters to be treated as template values
var tagRe = new RegExp('[^[A-Za-z0-9_-]+');
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
if (params.tag) {
params.tag.split(tagRe).forEach(function (tag, index) {
M.Chips.getInstance(chipElement).addChip({tag: tag, image: ''});
});
}
if (params.title) {
document.querySelector('#id_title').value = params.title;
}
if (params.body) {
document.querySelector('#id_body').value = params.body;
}

// Now build our our loaded list of configuration for our welcome page
let urlList = document.createElement('ul');

Expand Down Expand Up @@ -437,6 +444,41 @@ <h4>{% trans "Persistent Store Endpoints" %}</h4>
}
}

function form_file_input_hack() {
/*
A small hack to remformat all `<input file>` upload options to a more cleaner
and presentable look by wrapping it like this:

<span class="btn btn-file">
<i class="material-icons left">cloud_upload</i>
Browse<input type="file">
</span>
*/
document.querySelectorAll('input[type=file]').forEach(function (entry) {
const div = document.createElement('div');
const selected = document.createElement('div');
selected.style.display = 'none';
selected.setAttribute('class', 'file-selected');
const span = document.createElement('span')
span.setAttribute('class', 'btn btn-file waves-effect waves-light');
const i = document.createElement('i')
span.textContent = '{% trans "Browse" %}';
i.setAttribute('class', 'material-icons right');
i.textContent = 'folder';
div.appendChild(span);
span.appendChild(i);
entry.before(div)
span.appendChild(entry);
span.after(selected);

entry.addEventListener('change', function(e){
const selected = this.parentNode.nextElementSibling;
const file = e.target.files[0];
selected.style.display = 'block'
selected.textContent = file.name;
});
});
}
function notify_init() {
// over-ride manual submit for a nicer user experience
document.querySelector('#donotify').onsubmit = function(event) {
Expand Down Expand Up @@ -538,6 +580,7 @@ <h4>{% trans "Persistent Store Endpoints" %}</h4>

{% endif %}
notify_init();
form_file_input_hack();
{% endif %}
{% endblock %}

Expand Down
136 changes: 83 additions & 53 deletions apprise_api/static/css/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
/* Apprise Version */
.nav ul {
float: right;
font-style: normal;
font-style: normal;
font-size: 0.7rem;
}
.theme {
text-align: right;
display: block;
float:right;
text-align: right;
display: block;
float:right;
}

input {
Expand All @@ -25,50 +25,50 @@ input {
.tabs .tab.disabled a,.tabs .tab.disabled a:hover{font-weight: inherit}

code {
font-family: monospace;
white-space: normal;
padding: 0.2rem;
font-family: monospace;
white-space: normal;
padding: 0.2rem;
}

h1, h2, h3, h4, h5 {
margin-top: 0;
margin-top: 0;
}

td, th {
vertical-align: top;
padding-top: 0;
vertical-align: top;
padding-top: 0;
}
.api-details ol {
margin-top: 0;
margin-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}

ul.detail-buttons strong {
font-weight: 800;
font-weight: 800;
}

h4 em {
font-size: 2.0rem;
display: inline-block;
margin: 0;
padding: 0;
margin: 0;
padding: 0;
word-break: break-all;
line-height: 1.0em;
line-height: 1.0em;
}

em {
color: #004d40;
font-weight:bold;
color: #004d40;
font-weight:bold;
}

.no-config .info {
color: #004d40;
color: #004d40;
font-size: 3.3rem;

}

textarea {
height: 16rem;
height: 16rem;
font-family: monospace;
}

Expand All @@ -77,69 +77,69 @@ textarea {
}

#overview strong {
color: #004d40;
display: inline-block;
color: #004d40;
display: inline-block;
background-color: #eee;
}

.tabs .tab a{
border-radius: 25px 25px 0 0;
color:#2bbbad;
border-radius: 25px 25px 0 0;
color:#2bbbad;
}
.collection a.collection-item:not(.active):hover,
.tabs .tab a:focus, .tabs .tab a:focus.active {
background-color: #eee;
background-color: #eee;
}
.tabs .tab a:hover,.tabs .tab a.active {
background-color:transparent;
color:#004d40;
font-weight: bold;
background-color: #eee;
background-color:transparent;
color:#004d40;
font-weight: bold;
background-color: #eee;
}
.tabs .tab.disabled a,.tabs .tab.disabled a:hover {
color:rgba(102,147,153,0.7);
color:rgba(102,147,153,0.7);
}
.tabs .indicator {
background-color:#004d40;
background-color:#004d40;
}
.tabs .tab-locked a {
/* Handle locked out tabs */
color:rgba(212, 161, 157, 0.7);
color:rgba(212, 161, 157, 0.7);
}
.tabs .tab-locked a:hover,.tabs .tab-locked a.active {
/* Handle locked out tabs */
color: #6b0900;
color: #6b0900;
}

.material-icons{
display: inline-flex;
vertical-align: middle;
display: inline-flex;
vertical-align: middle;
}

#url-list .card-panel {
padding: 0.5rem;
margin: 0.1rem 0;
border-radius: 12px;
width: 50%;
min-width: 35rem;
float: left;
padding: 0.5rem;
margin: 0.1rem 0;
border-radius: 12px;
width: 50%;
min-width: 35rem;
float: left;
}

#url-list .chip {
margin: 0.3rem;
background-color: inherit;
border: 1px solid #e4e4e4;
cursor: pointer;
margin: 0.3rem;
background-color: inherit;
border: 1px solid #e4e4e4;
cursor: pointer;
}

#url-list code {
overflow-x: hidden;
overflow-y: hidden;
white-space: wrap;
overflow-x: hidden;
overflow-y: hidden;
white-space: wrap;
text-wrap: wrap;
overflow-wrap: break-word;
border-radius: 5px;
display: block;
border-radius: 5px;
display: block;
}

/* Notification Details */
Expand Down Expand Up @@ -193,12 +193,42 @@ ul.logs li.log_ERROR {
color: #8B0000;
}
h6 {
font-weight: bold;
font-weight: bold;
}
#overview pre {
margin-left: 2.0rem
margin-left: 2.0rem
}

code.config-id {
font-size: 0.7em;
font-size: 0.7em;
}

/* file button styled */
.btn-file {
position: relative;
overflow: hidden;
text-transform: uppercase;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}

.file-selected {
line-height: 2.0em;
font-size: 1.2rem;
border-radius: 5px;
padding: 0 1em;
overflow: hidden;
}
Loading

0 comments on commit 8cba2b4

Please sign in to comment.