Skip to content

Commit bebd3ab

Browse files
fquirinfquirin
committed
added new speech-bubble-box 'processing' animation;
1 parent 34b48c0 commit bebd3ab

File tree

6 files changed

+46
-8
lines changed

6 files changed

+46
-8
lines changed

‎www/css/sepiaFW-style.css‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,12 @@ body {
9090
min-width: 320px;
9191
height: 100%;
9292
margin: 0 auto;
93-
padding: 8px 8px;
93+
padding: 8px 8px;
94+
position: relative;
9495
}
9596
body.limit-size {
9697
max-width: 480px;
98+
padding: 0px;
9799
}
98100
.sepiaFW-standalone-app body {
99101
padding: 0px;
@@ -1777,6 +1779,34 @@ html.dark-skin #sepiaFW-login-help-btn {
17771779
user-select: none;
17781780
cursor: pointer;
17791781
}
1782+
#sepiaFW-chat-controls-speech-box-bubble-loader {
1783+
flex: 1 0 auto;
1784+
max-width: calc(100% - 90px);
1785+
margin: 0 0px;
1786+
display: flex;
1787+
justify-content: center;
1788+
align-items: center;
1789+
}
1790+
#sepiaFW-chat-controls-speech-box-bubble-loader div {
1791+
margin: 0 6px;
1792+
width: 5px;
1793+
background: currentColor;
1794+
border-radius: 3px;
1795+
animation: speech-box-bubble-loader-ani 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
1796+
}
1797+
#sepiaFW-chat-controls-speech-box-bubble-loader div:nth-child(1) {
1798+
animation-delay: -0.24s;
1799+
}
1800+
#sepiaFW-chat-controls-speech-box-bubble-loader div:nth-child(2) {
1801+
animation-delay: -0.12s;
1802+
}
1803+
#sepiaFW-chat-controls-speech-box-bubble-loader div:nth-child(3) {
1804+
animation-delay: 0;
1805+
}
1806+
@keyframes speech-box-bubble-loader-ani {
1807+
0% { height: 24px; }
1808+
50%, 100% { height: 6px; }
1809+
}
17801810

17811811
.sepiaFW-inner-container {
17821812
position: relative;

‎www/index.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
<!-- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600" rel="stylesheet"> -->
5858
<link rel="stylesheet" href="css/sepiaFW-style.css" title='main'>
5959
<link rel="stylesheet" href="css/sepiaFW-style-tiny.css" title='main'> <!-- TODO: we should load this only when needed -->
60+
<link rel="stylesheet" href="css/sepiaFW-style-dual-screen.css" title='main'>
6061
<!-- FOR MORE STYLESHEETS SEE END-OF-BODY -->
6162
<script src="scripts/sepiaFW.app.config.js"></script>
6263
<script src="scripts/sepiaFW.app.js"></script>
@@ -110,7 +111,7 @@ <h2><!--Welcome--><script>SepiaFW.local.w('welcome')</script></h2>
110111
</div>
111112
<!-- extend button -->
112113
<div id="sepiaFW-login-extend-box" style="visibility: hidden;">
113-
<button id="sepiaFW-login-extend-btn"><i class="material-icons md-btn2">arrow_drop_down</i></button>
114+
<button id="sepiaFW-login-extend-btn"><i class="material-icons md-btn2">&#xE5C5;</i></button>
114115
</div>
115116
<!-- help button -->
116117
<button id="sepiaFW-login-help-btn" onclick="SepiaFW.ui.actions.openUrlAutoTarget('https://github.com/SEPIA-Framework/sepia-docs#welcome-to-the-documentation-page-for-sepia');"><i class="material-icons md-inherit">help</i></button>
@@ -191,7 +192,7 @@ <h2><i class="material-icons md-txt">people</i>&nbsp;<script>SepiaFW.local.w('ac
191192
<div id="sepiaFW-nav-label-online-status" class="offline">offline</div>
192193
</div>
193194
<button id="sepiaFW-nav-menu-go-right">•</button>
194-
<button id="sepiaFW-nav-users-btn"><i class="material-icons md-btn2">speaker_notes</i></button>
195+
<button id="sepiaFW-nav-users-btn"><i class="material-icons md-btn2">&#xE8CD;</i></button>
195196
<div id="sepiaFW-nav-bar-page-indicator"><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div></div>
196197
</div>
197198
<!-- Output views -->
@@ -207,7 +208,7 @@ <h2><i class="material-icons md-txt">people</i>&nbsp;<script>SepiaFW.local.w('ac
207208
<!-- Controls -->
208209
<div id="sepiaFW-chat-controls">
209210
<div id="sepiaFW-chat-controls-right">
210-
<button id="sepiaFW-chat-controls-more-btn" class="eButton"><i class="material-icons md-btn">apps</i></button>
211+
<button id="sepiaFW-chat-controls-more-btn" class="eButton"><i class="material-icons md-btn">&#xE5C3;</i></button>
211212
</div>
212213
<div id="sepiaFW-assist-btn-area">
213214
<button id="sepiaFW-assist-btn"><i class="material-icons md-mic">&#xE029;</i></button>
@@ -224,7 +225,8 @@ <h2><i class="material-icons md-txt">people</i>&nbsp;<script>SepiaFW.local.w('ac
224225
</div>
225226
<div id="sepiaFW-chat-controls-speech-box" style="display:none;">
226227
<div id="sepiaFW-chat-controls-speech-box-edit"><i class="material-icons md-18">&#xE14C;</i></div><!-- &#xE3C9; -->
227-
<div id="sepiaFW-chat-controls-speech-box-bubble"></div>
228+
<div id="sepiaFW-chat-controls-speech-box-bubble" style="display: none;"></div>
229+
<div id="sepiaFW-chat-controls-speech-box-bubble-loader"><div></div><div></div><div></div></div>
228230
<div id="sepiaFW-chat-controls-speech-box-finish"><i class="material-icons md-18">&#xE409;</i></div><!-- &#xE163; -->
229231
</div>
230232
<!-- TeachUI layer -->

‎www/scripts/sepiaFW.account.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -719,7 +719,7 @@ function sepiaFW_build_account(sepiaSessionId){
719719

720720
//extend button
721721
var $extendBtn = $('#sepiaFW-login-extend-btn');
722-
$extendBtn.find('i').html('arrow_drop_down');
722+
//$extendBtn.find('i').html('arrow_drop_down');
723723
$extendBtn.off().on("click", function(){
724724
var isVisible = ($extendBtn.find('i').html() == 'arrow_drop_up');
725725
$('#sepiaFW-login-box').find('.extended-controls').each(function(){

‎www/scripts/sepiaFW.ui.build.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,9 @@ function sepiaFW_build_ui_build(sepiaSessionId){
353353
if (SepiaFW.speech && SepiaFW.speech.isRecognizing()){
354354
SepiaFW.speech.abortRecognition();
355355
var bubble = document.getElementById("sepiaFW-chat-controls-speech-box-bubble");
356-
bubble.contentEditable='true';
356+
$(bubble).show();
357+
$('#sepiaFW-chat-controls-speech-box-bubble-loader').hide();
358+
bubble.contentEditable = 'true';
357359
bubble.focus();
358360
}else{
359361
document.getElementById("sepiaFW-chat-controls-speech-box-bubble").innerHTML = '';

‎www/scripts/sepiaFW.ui.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -473,13 +473,15 @@ function sepiaFW_build_ui(){
473473
//show/hide speech-input-box
474474
UI.showLiveSpeechInputBox = function(){
475475
$('#sepiaFW-chat-controls-speech-box').fadeIn(300);
476+
$('#sepiaFW-chat-controls-speech-box-bubble').hide();
477+
$('#sepiaFW-chat-controls-speech-box-bubble-loader').show();
476478
//hide swipe areas for better button access
477479
$('#sepiaFW-swipeBar-container-left').hide();
478480
$('#sepiaFW-swipeBar-container-right').hide();
479481
}
480482
UI.hideLiveSpeechInputBox = function(){
481483
$('#sepiaFW-chat-controls-speech-box').fadeOut(300);
482-
document.getElementById("sepiaFW-chat-controls-speech-box-bubble").contentEditable='false';
484+
$('#sepiaFW-chat-controls-speech-box-bubble')[0].contentEditable = 'false';
483485
//restore swipe areas
484486
$('#sepiaFW-swipeBar-container-left').show();
485487
$('#sepiaFW-swipeBar-container-right').show();

‎www/scripts/sepiaFW.webSocket.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1332,6 +1332,8 @@ function sepiaFW_build_webSocket_client(sepiaSessionId){
13321332
var inBox = document.getElementById('sepiaFW-chat-controls-speech-box-bubble');
13331333
if (inBox){
13341334
if (text){
1335+
$(inBox).show();
1336+
$('#sepiaFW-chat-controls-speech-box-bubble-loader').hide();
13351337
inBox.textContent = text;
13361338
}else if (isFinal){
13371339
inBox.textContent = "";

0 commit comments

Comments
 (0)