Improve haptic feedback

Skylar Ittner 3 years ago
parent 1462417637
commit 54e1c69a6e

@ -145,9 +145,9 @@ function loadPackageList(sortType) {
+ '</div>'
+ '<div class="accordion-item-content">'
+ ' <div class="row padding-horizontal">'
+ ' <a href="#" class="col deliver-btn button button-outline color-green" data-packageid="{{id}}">{{#if delivered}}<i class="fas fa-undo"></i> Undeliver{{else}}<i class="fas fa-check"></i>&nbsp; Deliver{{/if}}</a>'
+ ' <a href="{{geolink}}" class="col geolink directions-btn button button-outline"><i class="fas fa-directions"></i> Directions</a>'
+ ' <a href="#" class="col delete-btn color-red button button-outline"><i class="fas fa-trash"></i> Delete</a>'
+ ' <a href="#" class="col deliver-btn button button-outline color-green hapticbtn" data-packageid="{{id}}">{{#if delivered}}<i class="fas fa-undo"></i> Undeliver{{else}}<i class="fas fa-check"></i>&nbsp; Deliver{{/if}}</a>'
+ ' <a href="{{geolink}}" class="col geolink directions-btn button button-outline hapticbtn"><i class="fas fa-directions"></i> Directions</a>'
+ ' <a href="#" class="col delete-btn color-red button button-outline hapticbtn"><i class="fas fa-trash"></i> Delete</a>'
+ ' </div>'
+ ' </div>'
+ '</div>'
@ -168,11 +168,11 @@ function loadPackageList(sortType) {
+ ' </div>'
+ '</div>'
+ '<div class="swipeout-actions-left">'
+ ' <a href="#" class="color-green deliver-btn" data-packageid="{{id}}">{{#if delivered}}<i class="fas fa-undo"></i> &nbsp; Undeliver{{else}}<i class="fas fa-check"></i>&nbsp; Deliver{{/if}}</a>'
+ ' <a href="{{geolink}}" class="color-blue directions-btn"><i class="material-icons">directions</i></a>'
+ ' <a href="#" class="color-green deliver-btn hapticbtn" data-packageid="{{id}}">{{#if delivered}}<i class="fas fa-undo"></i> &nbsp; Undeliver{{else}}<i class="fas fa-check"></i>&nbsp; Deliver{{/if}}</a>'
+ ' <a href="{{geolink}}" class="color-blue directions-btn hapticbtn"><i class="material-icons">directions</i></a>'
+ '</div>'
+ '<div class="swipeout-actions-right">'
+ ' <a href="#" class="color-red delete-btn"><i class="material-icons">delete</i>&nbsp; Delete</a>'
+ ' <a href="#" class="color-red delete-btn hapticbtn"><i class="material-icons">delete</i>&nbsp; Delete</a>'
+ '</div>'
+ '</li>';

@ -87,7 +87,7 @@ $(document).keyup(function (e) {
}
});
$(document).on("mousedown", ".hapticbtn,.input-clear-button,.button,.link", function () {
$(document).on("mousedown", ".hapticbtn,.input-clear-button,.button,.link,.fab", function () {
doHapticFeedback();
});

@ -79,7 +79,7 @@ function leafletMap() {
var iconName = getMapIconForItems(datai.items);
//console.log(iconName);
var classes = "package-marker package-marker-leaflet";
var classes = "package-marker package-marker-leaflet hapticbtn";
// Prevent selection highlight from going away after map refresh
if (map.openedPanelIconID != null && map.openedPanelIconID == datai.id) {

@ -105,7 +105,7 @@ function mapboxMap() {
var el = document.createElement("div");
el.className = "package-marker package-marker-mapbox";
el.className = "package-marker package-marker-mapbox hapticbtn";
// Prevent selection highlight from going away after map refresh
if (map.openedPanelIconID != null && map.openedPanelIconID == datai.id) {
el.className += " selected";

@ -138,12 +138,12 @@
</div>
</div>
<div class="fab fab-right-bottom no-tablet">
<div class="fab fab-right-bottom no-tablet hapticbtn">
<a class="addpackagebtn">
<i class="icon material-icons">add</i>
</a>
</div>
<div class="fab fab-extended fab-right-bottom only-tablet">
<div class="fab fab-extended fab-right-bottom only-tablet hapticbtn">
<a class="addpackagebtn">
<i class="icon material-icons">add</i>
<div class="fab-text">Add Item</div>
@ -162,7 +162,7 @@
<img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/history-dashed.svg" class="margin-vertical" />
<div class="margin-top">No recently added items! <span id="history-empty-swipe-prompt">Swipe <i class="fas fa-arrow-left"></i> to add some.</span></div>
</div>
<ul class="list no-hairlines tablet-inset no-margin-top" id="historylist">
<ul class="list no-hairlines tablet-inset no-margin-top hapticbtn" id="historylist">
<!-- Packages go here -->
</ul>
<div class="block text-align-center display-none noselect" id="tap-to-remove-history-prompt">

@ -34,7 +34,7 @@
<ul>
{{#each pages}}
<li>
<a href="{{href}}" class="item-link item-content">
<a href="{{href}}" class="item-link item-content hapticbtn">
<div class="item-media"><i class="icon {{icon}}"></i></div>
<div class="item-inner">
<div class="item-title">{{title}}</div>
@ -52,7 +52,7 @@
<div class="row">
{{#each pages}}
<div class="col-50 small-33 large-15">
<div class="card" onclick="router.navigate('{{href}}');" style="cursor: pointer; background-image: url(assets/images/bgs/{{bg}}); background-repeat: no-repeat; background-position: center; background-size: cover;">
<div class="card hapticbtn" onclick="router.navigate('{{href}}');" style="cursor: pointer; background-image: url(assets/images/bgs/{{bg}}); background-repeat: no-repeat; background-position: center; background-size: cover;">
<div class="card-content text-align-center padding-vertical">
<h1 class="no-margin"><i class="{{icon}}"></i></h1>
<br />

@ -25,7 +25,7 @@
{{#each settings}}
<li>
{{#if link}}
<div class="item-content item-link" data-setting="{{setting}}" onclick="{{onclick}}">
<div class="item-content item-link hapticbtn" data-setting="{{setting}}" onclick="{{onclick}}">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">{{title}}</div>
@ -41,14 +41,10 @@
<div class="item-title">
{{title}}
</div>
<div class="item-after" onclick="{
{
onclick
}
}">
<div class="item-after hapticbtn" onclick="{{onclick}}">
<label class="toggle toggle-init">
<input type="checkbox" {{#if checked}}checked{{/if}}>
<span class="toggle-icon"></span>
<span class="toggle-icon"></span>
</label>
</div>
</div>
@ -84,11 +80,7 @@
</div>
</a>
{{else}}
<div class="item-content" data-setting="{{setting}}" onclick="{
{
onclick
}
}">
<div class="item-content hapticbtn" data-setting="{{setting}}" onclick="{{onclick}}">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">{{title}}</div>

@ -24,7 +24,7 @@
<ul>
{{#each pages}}
<li>
<a href="{{href}}" class="item-link item-content">
<a href="{{href}}" class="item-link item-content hapticbtn">
<div class="item-media"><i class="icon {{icon}}"></i></div>
<div class="item-inner">
<div class="item-title">{{title}}</div>
@ -42,7 +42,7 @@
<div class="row">
{{#each pages}}
<div class="col-50 small-33 large-15">
<div class="card" onclick="router.navigate('{{href}}');" style="cursor: pointer; background-image: url(assets/images/bgs/{{bg}}); background-repeat: no-repeat; background-position: center; background-size: cover;">
<div class="card hapticbtn" onclick="router.navigate('{{href}}');" style="cursor: pointer; background-image: url(assets/images/bgs/{{bg}}); background-repeat: no-repeat; background-position: center; background-size: cover;">
<div class="card-content text-align-center padding-vertical">
<h1 class="no-margin"><i class="{{icon}}"></i></h1>
<br />

@ -22,7 +22,7 @@
<div class="list no-hairlines tablet-inset" style="margin-top: 0;">
<ul>
<li>
<a href="/toolbox/scanner/scanner" class="item-link item-content">
<a href="/toolbox/scanner/scanner" class="item-link item-content hapticbtn">
<div class="item-media">1</div>
<div class="item-inner">
<div class="item-title">Scan Barcode</div>
@ -30,7 +30,7 @@
</a>
</li>
<li>
<a href="/toolbox/scanner/entries" class="item-link item-content">
<a href="/toolbox/scanner/entries" class="item-link item-content hapticbtn">
<div class="item-media">2</div>
<div class="item-inner">
<div class="item-title">Review Entries</div>

@ -20,7 +20,7 @@
<div class="searchbar-input-wrap">
<input type="text" id="brokenscannerinput" placeholder="Enter Code" autocomplete="off" autocorrect="off" autocapitalize="off" style="padding-left: 1em; padding-right: 1em;" />
</div>
<a id="brokenscannercodeadd" onclick="brokenScannerAddTextEntry()" style="padding-right: 0.5em; padding-top: 0.3em;">
<a id="brokenscannercodeadd" onclick="brokenScannerAddTextEntry()" style="padding-right: 0.5em; padding-top: 0.3em;" class="hapticbtn">
<i class="material-icons">keyboard_return</i>
</a>
</div>
@ -30,19 +30,19 @@
</div>
</div>
<div class="fab fab-extended fab-left-bottom">
<div class="fab fab-extended fab-left-bottom hapticbtn">
<a href="#" onclick="brokenScannerEsc()">
<div class="fab-text">ESC</div>
</a>
</div>
<div class="fab fab-extended fab-center-bottom">
<div class="fab fab-extended fab-center-bottom hapticbtn">
<a href="#" onclick="brokenScannerScan()">
<div class="fab-text">Scan</div>
</a>
</div>
<div class="fab fab-extended fab-right-bottom">
<div class="fab fab-extended fab-right-bottom hapticbtn">
<a href="#" onclick="chooseScanEvent()">
<div class="fab-text">Enter</div>
</a>
@ -58,13 +58,13 @@
<div class="block no-margin-top padding-bottom" style="height: calc(100% - var(--f7-navbar-height)); overflow-y: auto;">
<div class="list tablet-inset no-hairlines no-margin-top">
<ul class="eventlist">
<ul class="eventlist hapticbtn">
</ul>
</div>
</div>
<div class="fab fab-extended fab-left-bottom">
<div class="fab fab-extended fab-left-bottom hapticbtn">
<a href="#" onclick="app.popup.close('#scanEventPopup');">
<div class="fab-text">ESC</div>
</a>
@ -81,13 +81,13 @@
<div class="block no-margin-top padding-bottom" style="height: calc(100% - var(--f7-navbar-height)); overflow-y: auto;">
<div class="list tablet-inset no-hairlines no-margin-top">
<ul class="eventlist">
<ul class="eventlist hapticbtn">
</ul>
</div>
</div>
<div class="fab fab-extended fab-left-bottom">
<div class="fab fab-extended fab-left-bottom hapticbtn">
<a href="#" onclick="app.popup.close('#scanEventTypePopup');">
<div class="fab-text">ESC</div>
</a>

@ -58,7 +58,7 @@
</li>
{{#each trackingcodehistory}}
<li>
<div class="item-link item-content" onclick="openTrackingHistory('{{this}}')">
<div class="item-link item-content hapticbtn" onclick="openTrackingHistory('{{this}}')">
<div class="item-inner">
<div class="item-title">{{this}}</div>
</div>

@ -54,7 +54,7 @@
<br />
<span id="summary-forecast-info"></span>
<br />
<a id="summary-forecast-creditlink" href="" onclick=""></a>
<a id="summary-forecast-creditlink" href="" onclick="" class="hapticbtn"></a>
</div>
</div>
</div>

Loading…
Cancel
Save