Преглед на файлове

Refactor toolbar to add separators via css and remove unneeded containers

master
Issac Gerges преди 10 години
родител
ревизия
fc6f5717cb

+ 5
- 0
css/font.css Целия файл

104
     content: "\e617";
104
     content: "\e617";
105
 }
105
 }
106
 
106
 
107
+.icon-hangup {
108
+    color:#ff0000;
109
+    font-size: 1.4em;
110
+}
111
+
107
 .icon-reload:before {
112
 .icon-reload:before {
108
     content: "\e618";
113
     content: "\e618";
109
 }
114
 }

+ 21
- 8
css/main.css Целия файл

38
     position: relative;
38
     position: relative;
39
 }
39
 }
40
 
40
 
41
+#toolbar a.button::after {
42
+    content: '';
43
+    display: inline-block;
44
+    position: absolute;
45
+    left: 40px;
46
+    width: 1px;
47
+    height: 20px;
48
+    background: #373737;
49
+}
50
+
51
+#toolbar a.button:last-child::after {
52
+    content: none;
53
+}
54
+
41
 .button {
55
 .button {
42
     display: inline-block;
56
     display: inline-block;
43
     position: relative;
57
     position: relative;
44
     color: #FFFFFF;
58
     color: #FFFFFF;
45
-    top: 0px;
46
-    padding: 10px 0px;
59
+    top: 0;
60
+    padding: 10px 0;
47
     width: 38px;
61
     width: 38px;
48
     cursor: pointer;
62
     cursor: pointer;
49
-    font-size: 11pt;
50
     text-align: center;
63
     text-align: center;
51
-    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.6);
64
+    text-shadow: 0 1px 0 rgba(255,255,255,.3), 0 -1px 0 rgba(0,0,0,.6);
52
     z-index: 1;
65
     z-index: 1;
53
 }
66
 }
54
 
67
 
61
     cursor: pointer;
74
     cursor: pointer;
62
 }
75
 }
63
 
76
 
64
-#chatButton, #chatBottomButton, #contactListButton, #numberOfParticipants {
77
+#toolbar_button_chat, #chatBottomButton, #contactListButton, #numberOfParticipants {
65
     -webkit-transition: all .5s ease-in-out;
78
     -webkit-transition: all .5s ease-in-out;
66
        -moz-transition: all .5s ease-in-out;
79
        -moz-transition: all .5s ease-in-out;
67
             transition: all .5s ease-in-out;
80
             transition: all .5s ease-in-out;
68
 }
81
 }
69
 /*#ffde00*/
82
 /*#ffde00*/
70
-#chatButton.active, #contactListButton.glowing, #chatBottomButton.glowing {
83
+#toolbar_button_chat.active, #contactListButton.glowing, #chatBottomButton.glowing {
71
     -webkit-text-shadow:    -1px 0 10px #00ccff,
84
     -webkit-text-shadow:    -1px 0 10px #00ccff,
72
                             0 1px 10px #00ccff,
85
                             0 1px 10px #00ccff,
73
                             1px 0 10px #00ccff,
86
                             1px 0 10px #00ccff,
100
     color: #00ccff;
113
     color: #00ccff;
101
 }
114
 }
102
 
115
 
103
-#recordButton {
116
+#toolbar_button_record {
104
     -webkit-transition: all .5s ease-in-out;
117
     -webkit-transition: all .5s ease-in-out;
105
     -moz-transition: all .5s ease-in-out;
118
     -moz-transition: all .5s ease-in-out;
106
     transition: all .5s ease-in-out;
119
     transition: all .5s ease-in-out;
107
 }
120
 }
108
 /*#ffde00*/
121
 /*#ffde00*/
109
-#recordButton.active {
122
+#toolbar_button_record.active {
110
     -webkit-text-shadow:    -1px 0 10px #00ccff,
123
     -webkit-text-shadow:    -1px 0 10px #00ccff,
111
     0 1px 10px #00ccff,
124
     0 1px 10px #00ccff,
112
     1px 0 10px #00ccff,
125
     1px 0 10px #00ccff,

+ 1
- 1
css/videolayout_default.css Целия файл

135
     z-index: 0;
135
     z-index: 0;
136
 }
136
 }
137
 
137
 
138
-#etherpadButton {
138
+#toolbar_button_etherpad {
139
     display: none;
139
     display: none;
140
 }
140
 }
141
 
141
 

+ 17
- 75
index.html Целия файл

22
     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
22
     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
23
     <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
23
     <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
24
     <script src="interface_config.js?v=5"></script>
24
     <script src="interface_config.js?v=5"></script>
25
-    <script src="libs/app.bundle.js?v=119"></script>
25
+    <script src="libs/app.bundle.js?v=120"></script>
26
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
26
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
27
     <link rel="stylesheet" href="css/font.css?v=7"/>
27
     <link rel="stylesheet" href="css/font.css?v=7"/>
28
     <link rel="stylesheet" href="css/toastr.css?v=1">
28
     <link rel="stylesheet" href="css/toastr.css?v=1">
133
                 </div>
133
                 </div>
134
                 <span id="toolbar">
134
                 <span id="toolbar">
135
                     <span id="authentication" class="authentication" style="display: none">
135
                     <span id="authentication" class="authentication" style="display: none">
136
-                        <a class="button" id="toolbar_button_authentication" >
137
-                            <i id="authButton" class="icon-avatar"></i>
138
-                        </a>
136
+                        <a class="button icon-avatar" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
139
                         <ul class="loginmenu">
137
                         <ul class="loginmenu">
140
                             <span class="loginmenuPadding"></span>
138
                             <span class="loginmenuPadding"></span>
141
                             <li id="toolbar_auth_identity" class="identity"></li>
139
                             <li id="toolbar_auth_identity" class="identity"></li>
146
                                 <a class="authButton" data-i18n="toolbar.logout"></a>
144
                                 <a class="authButton" data-i18n="toolbar.logout"></a>
147
                             </li>
145
                             </li>
148
                         </ul>
146
                         </ul>
149
-                        <div class="header_button_separator"></div>
150
                     </span>
147
                     </span>
151
-                    <a class="button" id="toolbar_button_mute" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" data-i18n="[content]toolbar.mute" content="Mute / Unmute">
152
-                        <i id="mute" class="icon-microphone"></i>
148
+                    <a class="button icon-microphone" id="toolbar_button_mute" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" data-i18n="[content]toolbar.mute" content="Mute / Unmute"></a>
149
+                    <a class="button icon-camera" id="toolbar_button_camera" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="toggleVideoPopover" data-i18n="[content]toolbar.videomute" content="Start / stop camera"></a>
150
+                    <a class="button icon-recEnable" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.record" content="Record" style="display: none"></a>
151
+                    <a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
152
+                    <a class="button icon-link" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.invite" content="Invite others"></a>
153
+                    <a class="button icon-chat" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="bottom" data-i18n="[content]toolbar.chat" content="Open / close chat">
154
+                        <span id="unreadMessages"></span>
153
                     </a>
155
                     </a>
154
-                    <div class="header_button_separator"></div>
155
-                    <a class="button" id="toolbar_button_camera" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="toggleVideoPopover" data-i18n="[content]toolbar.videomute" content="Start / stop camera">
156
-                        <i id="video" class="icon-camera"></i>
157
-                    </a>
158
-                    <span id="recording" style="display: none">
159
-                        <div class="header_button_separator"></div>
160
-                        <a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.record" content="Record">
161
-                            <i id="recordButton" class="icon-recEnable"></i>
162
-                        </a>
163
-                    </span>
164
-                    <div class="header_button_separator"></div>
165
-                    <a class="button" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.lock" content="Lock / unlock room">
166
-                        <i id="lockIcon" class="icon-security"></i>
167
-                    </a>
168
-                    <div class="header_button_separator"></div>
169
-                    <a class="button" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.invite" content="Invite others">
170
-                        <i class="icon-link"></i>
171
-                    </a>
172
-                    <div class="header_button_separator"></div>
173
-                    <span class="toolbar_span">
174
-                        <a class="button" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="bottom" data-i18n="[content]toolbar.chat" content="Open / close chat">
175
-                            <i id="chatButton" class="icon-chat">
176
-                                <span id="unreadMessages"></span>
177
-                            </i>
178
-                        </a>
179
-                    </span>
180
-                    <span id="prezi_button">
181
-                        <div class="header_button_separator"></div>
182
-                        <a class="button" id="toolbar_button_prezi" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.prezi" content="Share Prezi">
183
-                            <i class="icon-prezi"></i>
184
-                        </a>
185
-                    </span>
186
-                    <span id="etherpadButton">
187
-                        <div class="header_button_separator"></div>
188
-                        <a class="button" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="bottom" content="Shared document" data-i18n="[content]toolbar.etherpad">
189
-                            <i class="icon-share-doc"></i>
190
-                        </a>
191
-                    </span>
192
-                    <span id="desktopsharing" style="display: none">
193
-                        <div class="header_button_separator"></div>
194
-                        <a class="button" id="toolbar_button_desktopsharing" data-container="body" data-toggle="popover" data-placement="bottom" content="Share screen" data-i18n="[content]toolbar.sharescreen">
195
-                            <i class="icon-share-desktop"></i>
196
-                        </a>
197
-                    </span>
198
-                    <div class="header_button_separator"></div>
199
-                    <a class="button" id="toolbar_button_fullScreen" data-container="body" data-toggle="popover" data-placement="bottom" content="Enter / Exit Full Screen" data-i18n="[content]toolbar.fullscreen">
200
-                        <i id="fullScreen" class="icon-full-screen"></i>
201
-                    </a>
202
-                    <span id="sipCallButton" style="display: none">
203
-                        <div class="header_button_separator"></div>
204
-                        <a class="button" id="toolbar_button_sip" data-container="body" data-toggle="popover" data-placement="bottom" content="Call SIP number" data-i18n="[content]toolbar.sip">
205
-                            <i class="icon-telephone"></i></a>
206
-                    </span>
207
-                    <span id="dialPadButton" style="display: none">
208
-                        <div class="header_button_separator"></div>
209
-                        <a class="button" id="toolbar_button_dialpad" data-container="body" data-toggle="popover" data-placement="bottom" content="Open dialpad" data-i18n="[content]toolbar.dialpad">
210
-                            <i class="icon-dialpad"></i></a>
211
-                    </span>
212
-                    <div class="header_button_separator"></div>
213
-                    <a class="button" id="toolbar_button_settings" data-container="body" data-toggle="popover" data-placement="bottom" content="Settings" data-i18n="[content]toolbar.Settings">
214
-                        <i id="settingsButton" class="icon-settings"></i>
215
-                    </a>
216
-                    <div class="header_button_separator"></div>
217
-                    <span id="hangup">
218
-                        <a class="button" id="toolbar_button_hangup" data-container="body" data-toggle="popover" data-placement="bottom" content="Hang Up" data-i18n="[content]toolbar.hangup">
219
-                            <i class="icon-hangup" style="color:#ff0000;font-size: 1.4em;"></i>
220
-                        </a>
221
-                    </span>
156
+                    <a class="button icon-prezi" id="toolbar_button_prezi" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.prezi" content="Share Prezi"></a>
157
+                    <a class="button icon-share-doc" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="bottom" content="Shared document" data-i18n="[content]toolbar.etherpad"></a>
158
+                    <a class="button icon-share-desktop" id="toolbar_button_desktopsharing" data-container="body" data-toggle="popover" data-placement="bottom" content="Share screen" data-i18n="[content]toolbar.sharescreen" style="display: none"></a>
159
+                    <a class="button icon-full-screen" id="toolbar_button_fullScreen" data-container="body" data-toggle="popover" data-placement="bottom" content="Enter / Exit Full Screen" data-i18n="[content]toolbar.fullscreen"></a>
160
+                    <a class="button icon-telephone" id="toolbar_button_sip" data-container="body" data-toggle="popover" data-placement="bottom" content="Call SIP number" data-i18n="[content]toolbar.sip" style="display: none"></a>
161
+                    <a class="button icon-dialpad" id="toolbar_button_dialpad" data-container="body" data-toggle="popover" data-placement="bottom" content="Open dialpad" data-i18n="[content]toolbar.dialpad" style="display: none"></a>
162
+                    <a class="button icon-settings" id="toolbar_button_settings" data-container="body" data-toggle="popover" data-placement="bottom" content="Settings" data-i18n="[content]toolbar.Settings"></a>
163
+                    <a class="button icon-hangup" id="toolbar_button_hangup" data-container="body" data-toggle="popover" data-placement="bottom" content="Hang Up" data-i18n="[content]toolbar.hangup"></a>
222
                 </span>
164
                 </span>
223
             </div>
165
             </div>
224
             <div id="subject"></div>
166
             <div id="subject"></div>

+ 20957
- 20909
libs/app.bundle.js
Файловите разлики са ограничени, защото са твърде много
Целия файл


+ 3
- 3
modules/UI/UI.js Целия файл

811
     if (!audioMute(mute, function () {
811
     if (!audioMute(mute, function () {
812
             VideoLayout.showLocalAudioIndicator(mute);
812
             VideoLayout.showLocalAudioIndicator(mute);
813
 
813
 
814
-            UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
814
+            UIUtil.buttonClick("#toolbar_button_mute", "icon-microphone icon-mic-disabled");
815
         })) {
815
         })) {
816
         // We still click the button.
816
         // We still click the button.
817
-        UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
817
+        UIUtil.buttonClick("#toolbar_button_mute", "icon-microphone icon-mic-disabled");
818
         return;
818
         return;
819
     }
819
     }
820
 };
820
 };
841
 };
841
 };
842
 
842
 
843
 UI.setVideoMuteButtonsState = function (mute) {
843
 UI.setVideoMuteButtonsState = function (mute) {
844
-    var video = $('#video');
844
+    var video = $('#toolbar_button_camera');
845
     var communicativeClass = "icon-camera";
845
     var communicativeClass = "icon-camera";
846
     var muteClass = "icon-camera icon-camera-disabled";
846
     var muteClass = "icon-camera icon-camera-disabled";
847
 
847
 

+ 2
- 2
modules/UI/etherpad/Etherpad.js Целия файл

30
  * Creates the Etherpad button and adds it to the toolbar.
30
  * Creates the Etherpad button and adds it to the toolbar.
31
  */
31
  */
32
 function enableEtherpadButton() {
32
 function enableEtherpadButton() {
33
-    if (!$('#etherpadButton').is(":visible"))
34
-        $('#etherpadButton').css({display: 'inline-block'});
33
+    if (!$('#toolbar_button_etherpad').is(":visible"))
34
+        $('#toolbar_button_etherpad').css({display: 'inline-block'});
35
 }
35
 }
36
 
36
 
37
 /**
37
 /**

+ 1
- 1
modules/UI/side_pannels/SidePanelToggler.js Целия файл

17
     var buttons = {
17
     var buttons = {
18
         '#chatspace': '#chatBottomButton',
18
         '#chatspace': '#chatBottomButton',
19
         '#contactlist': '#contactListButton',
19
         '#contactlist': '#contactListButton',
20
-        '#settingsmenu': '#settingsButton'
20
+        '#settingsmenu': '#toolbar_button_settings'
21
     };
21
     };
22
 
22
 
23
     /**
23
     /**

+ 2
- 2
modules/UI/side_pannels/chat/Chat.js Целия файл

19
     var unreadMsgBottomElement
19
     var unreadMsgBottomElement
20
         = document.getElementById('bottomUnreadMessages');
20
         = document.getElementById('bottomUnreadMessages');
21
 
21
 
22
-    var glower = $('#chatButton');
22
+    var glower = $('#toolbar_button_chat');
23
     var bottomGlower = $('#chatBottomButton');
23
     var bottomGlower = $('#chatBottomButton');
24
 
24
 
25
     if (unreadMessages) {
25
     if (unreadMessages) {
29
         ToolbarToggler.dockToolbar(true);
29
         ToolbarToggler.dockToolbar(true);
30
 
30
 
31
         var chatButtonElement
31
         var chatButtonElement
32
-            = document.getElementById('chatButton').parentNode;
32
+            = document.getElementById('toolbar_button_chat');
33
         var leftIndent = (UIUtil.getTextWidth(chatButtonElement) -
33
         var leftIndent = (UIUtil.getTextWidth(chatButtonElement) -
34
             UIUtil.getTextWidth(unreadMsgElement)) / 2;
34
             UIUtil.getTextWidth(unreadMsgElement)) / 2;
35
         var topIndent = (UIUtil.getTextHeight(chatButtonElement) -
35
         var topIndent = (UIUtil.getTextHeight(chatButtonElement) -

+ 14
- 14
modules/UI/toolbars/Toolbar.js Целия файл

46
         return APP.desktopsharing.toggleScreenSharing();
46
         return APP.desktopsharing.toggleScreenSharing();
47
     },
47
     },
48
     "toolbar_button_fullScreen": function() {
48
     "toolbar_button_fullScreen": function() {
49
-        UIUtil.buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");
49
+        UIUtil.buttonClick("#toolbar_button_fullScreen", "icon-full-screen icon-exit-full-screen");
50
         return Toolbar.toggleFullScreen();
50
         return Toolbar.toggleFullScreen();
51
     },
51
     },
52
     "toolbar_button_sip": function () {
52
     "toolbar_button_sip": function () {
334
      */
334
      */
335
     my.setupButtonsFromConfig = function () {
335
     my.setupButtonsFromConfig = function () {
336
         if (config.disablePrezi) {
336
         if (config.disablePrezi) {
337
-            $("#prezi_button").css({display: "none"});
337
+            $("#toolbar_button_prezi").css({display: "none"});
338
         }
338
         }
339
     };
339
     };
340
 
340
 
509
      * Unlocks the lock button state.
509
      * Unlocks the lock button state.
510
      */
510
      */
511
     my.unlockLockButton = function () {
511
     my.unlockLockButton = function () {
512
-        if ($("#lockIcon").hasClass("icon-security-locked"))
513
-            UIUtil.buttonClick("#lockIcon", "icon-security icon-security-locked");
512
+        if ($("#toolbar_button_security").hasClass("icon-security-locked"))
513
+            UIUtil.buttonClick("#toolbar_button_security", "icon-security icon-security-locked");
514
     };
514
     };
515
     /**
515
     /**
516
      * Updates the lock button state to locked.
516
      * Updates the lock button state to locked.
517
      */
517
      */
518
     my.lockLockButton = function () {
518
     my.lockLockButton = function () {
519
-        if ($("#lockIcon").hasClass("icon-security"))
520
-            UIUtil.buttonClick("#lockIcon", "icon-security icon-security-locked");
519
+        if ($("#toolbar_button_security").hasClass("icon-security"))
520
+            UIUtil.buttonClick("#toolbar_button_security", "icon-security icon-security-locked");
521
     };
521
     };
522
 
522
 
523
     /**
523
     /**
540
         }
540
         }
541
 
541
 
542
         if (show) {
542
         if (show) {
543
-            $('#recording').css({display: "inline"});
543
+            $('#toolbar_button_record').css({display: "inline"});
544
         }
544
         }
545
         else {
545
         else {
546
-            $('#recording').css({display: "none"});
546
+            $('#toolbar_button_record').css({display: "none"});
547
         }
547
         }
548
     };
548
     };
549
 
549
 
550
     // Sets the state of the recording button
550
     // Sets the state of the recording button
551
     my.setRecordingButtonState = function (isRecording) {
551
     my.setRecordingButtonState = function (isRecording) {
552
-        var selector = $('#recordButton');
552
+        var selector = $('#toolbar_button_record');
553
         if (isRecording) {
553
         if (isRecording) {
554
             selector.removeClass("icon-recEnable");
554
             selector.removeClass("icon-recEnable");
555
             selector.addClass("icon-recEnable active");
555
             selector.addClass("icon-recEnable active");
562
     // Shows or hides SIP calls button
562
     // Shows or hides SIP calls button
563
     my.showSipCallButton = function (show) {
563
     my.showSipCallButton = function (show) {
564
         if (APP.xmpp.isSipGatewayEnabled() && show) {
564
         if (APP.xmpp.isSipGatewayEnabled() && show) {
565
-            $('#sipCallButton').css({display: "inline-block"});
565
+            $('#toolbar_button_sip').css({display: "inline-block"});
566
         } else {
566
         } else {
567
-            $('#sipCallButton').css({display: "none"});
567
+            $('#toolbar_button_sip').css({display: "none"});
568
         }
568
         }
569
     };
569
     };
570
 
570
 
571
     // Shows or hides the dialpad button
571
     // Shows or hides the dialpad button
572
     my.showDialPadButton = function (show) {
572
     my.showDialPadButton = function (show) {
573
         if (show) {
573
         if (show) {
574
-            $('#dialPadButton').css({display: "inline-block"});
574
+            $('#toolbar_button_dialpad').css({display: "inline-block"});
575
         } else {
575
         } else {
576
-            $('#dialPadButton').css({display: "none"});
576
+            $('#toolbar_button_dialpad').css({display: "none"});
577
         }
577
         }
578
     };
578
     };
579
 
579
 
621
      * @param active the state of the desktop streaming.
621
      * @param active the state of the desktop streaming.
622
      */
622
      */
623
     my.changeDesktopSharingButtonState = function (active) {
623
     my.changeDesktopSharingButtonState = function (active) {
624
-        var button = $("#desktopsharing > a");
624
+        var button = $("#toolbar_button_desktopsharing");
625
         if (active) {
625
         if (active) {
626
             button.addClass("glow");
626
             button.addClass("glow");
627
         } else {
627
         } else {

+ 2
- 2
modules/UI/toolbars/ToolbarToggler.js Целия файл

6
 
6
 
7
 function showDesktopSharingButton() {
7
 function showDesktopSharingButton() {
8
     if (APP.desktopsharing.isDesktopSharingEnabled()) {
8
     if (APP.desktopsharing.isDesktopSharingEnabled()) {
9
-        $('#desktopsharing').css({display: "inline"});
9
+        $('#toolbar_button_desktopsharing').css({display: "inline"});
10
     } else {
10
     } else {
11
-        $('#desktopsharing').css({display: "none"});
11
+        $('#toolbar_button_desktopsharing').css({display: "none"});
12
     }
12
     }
13
 }
13
 }
14
 
14
 

Loading…
Отказ
Запис