Fixed positioning of footer bar on empty course list; updated import-export UI and added auto-close for popups
This commit is contained in:
Kevin Dao
@@ -85,8 +85,9 @@ i {
|
||||
}
|
||||
|
||||
.settings {
|
||||
position: relative;
|
||||
float: right;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
display: flex;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
@@ -245,6 +246,18 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
#import-export-popup {
|
||||
background: white;
|
||||
color: #747474;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
bottom: 42px;
|
||||
right: 10px;
|
||||
border-radius: inherit;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -316,6 +329,37 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
margin: 8px 0px;
|
||||
}
|
||||
|
||||
.simple-menu-option {
|
||||
display: inline-block;
|
||||
color: rgba(0, 0, 45, 0.48);
|
||||
border: none;
|
||||
font-size: 17px;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
padding: 10px 0px 5px 5px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.simple-menu-option i {
|
||||
font-size: 19px;
|
||||
vertical-align: middle;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.simple-menu-option:hover {
|
||||
background-color: rgba(177, 175, 175, 0.324);
|
||||
-webkit-transition-duration: 0.4s; /* Safari */
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
.simple-menu-option:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
79
js/popup.js
79
js/popup.js
@@ -126,6 +126,7 @@ $(document).ready(function () {
|
||||
}).on('mouseleave', '.copybut', function () {
|
||||
$(this).removeClass('shadow');
|
||||
});
|
||||
|
||||
$("#courseList").on('click', '.copybut', function (e) {
|
||||
e.stopPropagation();
|
||||
var temp = $("<input>");
|
||||
@@ -147,6 +148,7 @@ $(document).ready(function () {
|
||||
document.execCommand("copy");
|
||||
temp.remove();
|
||||
});
|
||||
|
||||
$("#courseList").on('click', 'li', function () {
|
||||
$(this).find("#listMoreInfo").click(function () {
|
||||
window.open(courses[$(this).closest("li").attr("id")].link);
|
||||
@@ -214,49 +216,58 @@ $(document).ready(function () {
|
||||
$(this).find('#arrow').css('transform', '');
|
||||
}
|
||||
});
|
||||
|
||||
$("#clear").click(function () {
|
||||
clear();
|
||||
});
|
||||
|
||||
$("#schedule").click(function () {
|
||||
chrome.tabs.create({
|
||||
'url': 'https://registrar.utexas.edu/schedules'
|
||||
});
|
||||
});
|
||||
|
||||
$("#impexp").click(function () {
|
||||
// Close import export window
|
||||
if ($("#impexp>i").text() == 'close') {
|
||||
$('#import').hide();
|
||||
$('#export').hide();
|
||||
$("#impexp>i").text('import_export');
|
||||
hideImportExportPopup();
|
||||
// $(this).removeClass('selected');
|
||||
} else {
|
||||
$("#impexp>i").text('close');
|
||||
$('#import').show();
|
||||
// Open import export window
|
||||
|
||||
// If search window open, close it first to prevent overlap
|
||||
if ($("#search>i").text() == 'close') {
|
||||
hideSearchPopup();
|
||||
}
|
||||
|
||||
showImportExportPopup();
|
||||
// $(this).addClass('selected');
|
||||
$('#export').show();
|
||||
}
|
||||
});
|
||||
|
||||
$("#search").click(function () {
|
||||
// Close search window
|
||||
if ($("#search>i").text() == 'close') {
|
||||
$("#search>i").text('search');
|
||||
$("#class_id_input").hide();
|
||||
$("#semcon").hide();
|
||||
$("#semesters").hide();
|
||||
$("#search-popup").addClass('hide');
|
||||
hideSearchPopup();
|
||||
// $(this).removeClass('selected');
|
||||
} else {
|
||||
$("#search>i").text('close');
|
||||
$("#class_id_input").show();
|
||||
$("#semesters").show();
|
||||
$("#semcon").show();
|
||||
$('#class_id_input').focus();
|
||||
$("#search-popup").removeClass('hide');
|
||||
// Open search window
|
||||
|
||||
// If import export window open, close it first to prevent overlap
|
||||
if ($("#impexp>i").text() == 'close') {
|
||||
hideImportExportPopup();
|
||||
}
|
||||
|
||||
showSearchPopup();
|
||||
// $(this).addClass('selected');
|
||||
}
|
||||
});
|
||||
$('#import').click(function () {
|
||||
|
||||
$('#import-class').click(function () {
|
||||
$("#importOrig").click();
|
||||
});
|
||||
$('#export').click(function () {
|
||||
|
||||
$('#export-class').click(function () {
|
||||
chrome.storage.sync.get('savedCourses', function (data) {
|
||||
if (data.savedCourses.length > 0) {
|
||||
var exportlink = document.createElement('a');
|
||||
@@ -296,6 +307,7 @@ $(document).ready(function () {
|
||||
'url': "calendar.html"
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$("#importOrig").change(function (e) {
|
||||
@@ -526,11 +538,38 @@ function getDtarr(object) {
|
||||
return dtarr;
|
||||
}
|
||||
|
||||
/*Convert time to 24hour format*/
|
||||
/* Convert time to 24hour format */
|
||||
function convertTime(time) {
|
||||
var converted = time.replace(/\./g, '').split("-");
|
||||
for (var i = 0; i < 2; i++) {
|
||||
converted[i] = moment(converted[i], ["h:mm A"]).format("HH:mm");
|
||||
}
|
||||
return converted;
|
||||
}
|
||||
|
||||
function hideSearchPopup() {
|
||||
$("#search>i").text('search');
|
||||
$("#class_id_input").hide();
|
||||
$("#semcon").hide();
|
||||
$("#semesters").hide();
|
||||
$("#search-popup").addClass('hide');
|
||||
}
|
||||
|
||||
function showSearchPopup() {
|
||||
$("#search>i").text('close');
|
||||
$("#class_id_input").show();
|
||||
$("#semesters").show();
|
||||
$("#semcon").show();
|
||||
$('#class_id_input').focus();
|
||||
$("#search-popup").removeClass('hide');
|
||||
}
|
||||
|
||||
function hideImportExportPopup() {
|
||||
$("#import-export-popup").addClass('hide');
|
||||
$("#impexp>i").text('import_export');
|
||||
}
|
||||
|
||||
function showImportExportPopup() {
|
||||
$("#impexp>i").text('close');
|
||||
$("#import-export-popup").removeClass('hide');
|
||||
}
|
||||
24
popup.html
24
popup.html
@@ -55,27 +55,25 @@
|
||||
</div>
|
||||
|
||||
<button id="search-class" class="matbut">Search</button>
|
||||
|
||||
</div>
|
||||
|
||||
<button title='Export' style="background-color:white; display:none;" class="settingsbut" id='export'>
|
||||
<i style='color:#FF0000' class="material-icons">
|
||||
arrow_downward
|
||||
</i>
|
||||
</button>
|
||||
|
||||
<button title='Import' style="background-color:white; display:none;" class="settingsbut" id='import'>
|
||||
<i style='color:#FF0000' ; class="material-icons">
|
||||
arrow_upward
|
||||
</i>
|
||||
</button>
|
||||
|
||||
<button title='Import/Export' style="background-color:white;" class="settingsbut" id='impexp'>
|
||||
<i style='color:#FF9800' class="material-icons">
|
||||
import_export
|
||||
</i>
|
||||
</button>
|
||||
|
||||
<div id="import-export-popup" class="hide">
|
||||
<div class="flex-container">
|
||||
<button id="import-class" class="simple-menu-option">
|
||||
<i class="material-icons">file_upload</i>Import Classes
|
||||
</button>
|
||||
<button id="export-class" class="simple-menu-option">
|
||||
<i class="material-icons">file_download</i>Export Classes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button title='Options' style="background-color:white; margin-right: 0px;" class="settingsbut" id='open'>
|
||||
<i style='color:#FF9800' class="material-icons">
|
||||
settings
|
||||
|
||||
Reference in New Issue
Block a user