fix style bug

ykxie
1 parent dac234f8
Showing 14 changed files with 161 additions and 63 deletions
src/css/ide.css
src/css/main.css
src/css/mian.css
src/css/recording.css
src/gxb-ide/CodingEditer.js
src/gxb-ide/Dir.js
src/gxb-ide/ToolBox.js
src/index.html
src/js/audioPlayer/theme.default.css
src/js/gbreplayer.js
src/player.html
src/scss/main.scss
src/scss/recording.scss
src/v1.1/player.html
@@ -284,7 +284,7 @@ html, body {
  
 #resultoutput {
   height: 164px;
-  overflow-y: scroll; }
+  overflow-y: auto; }
  
 .fb {
   float: right;
@@ -380,12 +380,15 @@ html, body {
     left: 50%;
     transform: translate(-50%, -50%); }
  
+.play-page .record-wrap {
+  padding-top: 0; }
+
 #playFooter {
-  height: 60px;
+  height: 46px;
   width: 100%;
   z-index: 999;
   background-color: #23383f;
-  padding: 10px 24px; }
+  padding: 4px 24px; }
   #playFooter #componentWrapper {
     width: 100%; }
  
@@ -421,10 +424,8 @@ html, body {
   border: none;
   width: 40px;
   height: 40px;
-  margin-left: 48px; }
-
-.play-code img {
-  width: 100%; }
+  margin-left: 48px;
+  outline: none; }
  
 .confirm-tip {
   position: absolute;
@@ -156,7 +156,7 @@ html, body {
  
 #resultoutput {
   height: 164px;
-  overflow-y: scroll; }
+  overflow-y: auto; }
  
 .fb {
   float: right;
@@ -252,12 +252,15 @@ html, body {
     left: 50%;
     transform: translate(-50%, -50%); }
  
+.play-page .record-wrap {
+  padding-top: 0; }
+
 #playFooter {
-  height: 60px;
+  height: 46px;
   width: 100%;
   z-index: 999;
   background-color: #23383f;
-  padding: 10px 24px; }
+  padding: 4px 24px; }
   #playFooter #componentWrapper {
     width: 100%; }
  
@@ -293,10 +296,8 @@ html, body {
   border: none;
   width: 40px;
   height: 40px;
-  margin-left: 48px; }
-
-.play-code img {
-  width: 100%; }
+  margin-left: 48px;
+  outline: none; }
  
 .confirm-tip {
   position: absolute;
@@ -62,6 +62,21 @@ a:hover, a:focus {
 button {
   cursor: pointer; }
  
+.CodeMirror {
+  width: 100%; }
+
+.CodeMirror,
+.CodeMirror * {
+  font-family: monospace !important;
+  font-size: 16px; }
+
+.row {
+  margin-right: 0px !important;
+  margin-left: 0px !important; }
+
+.col-md-8 {
+  padding-left: 0 !important; }
+
 #player {
   width: 100%;
   height: 100%; }
@@ -75,7 +90,7 @@ button {
   padding-left: 0;
   padding-right: 0; }
  
-.play-code {
+.play-code, .play-pause-code {
   background: transparent;
   color: #fff;
   border: none;
@@ -95,13 +110,12 @@ button {
     left: 50%;
     transform: translate(-50%, -50%); }
  
-.recording-page {
-  padding-top: 16px; }
-  .recording-page .col-md-8 {
-    padding-right: 0;
-    overflow: hidden; }
-  .recording-page .col-md-4 {
-    padding-left: 0; }
+.recording-page .col-md-8 {
+  padding-right: 0;
+  overflow: hidden; }
+
+.recording-page .col-md-4 {
+  padding-left: 0; }
  
 .real-program-title {
   width: 100%;
@@ -378,7 +392,7 @@ button {
     text-align: center; }
  
 #previewpanel .tab-content {
-  margin: 16px; }
+  overflow: auto !important; }
   #previewpanel .tab-content .form-control {
     border: none;
     border-bottom: 1px solid #999;
@@ -299,6 +299,7 @@
                 treeLinkEditor[i].CodeMirrorRecord = CodeMirror.fromTextArea($('#' + treeLinkEditor[i].record)[0], {
                     value: '',
                     mode: modeNameItem,
+                    styleActiveLine: true,
                     lineNumbers: true,
                     smartIndent: false,
                     // theme: "erlang-dark",
@@ -463,6 +464,9 @@
                 }
  
                 CodingEditer.triggertotal = 0;
+
+                $('.play-code').show();
+                $('.pause-play-code').hide();
             }
  
         }
@@ -610,8 +610,13 @@
  
                 AudioPlayer(audioUrl)
  
-                // 请求玩立刻执行
-                $.AudioPlayer.play()
+                var role = getQuery('role');
+                if (role == 0) {
+                    // 请求玩立刻执行
+                    $.AudioPlayer.play()
+                }else{
+                    CodingEditer.playCoding();
+                }
  
             },
             error: function(error) {
@@ -641,7 +646,7 @@
                 source: "https://gxb-file.oss-cn-beijing.aliyuncs.com" + audioUrl,
                 imagePath: '../js/audioPlayer/image',
                 debuggers: false,
-                allowSeek: false,
+                // allowSeek: false,
                 playCallback: function() { // 播放
                     console.log('++++++++');
                     CodingEditer.playCoding();
@@ -290,6 +290,8 @@
             });
         },
         playerPage: function(){
+            $('.play-code').hide();
+            // $('.pause-play-code').show();
             CodingEditer.playCoding();
             CodingEditer.editable(0)
         },
@@ -14,7 +14,7 @@
     <link href="css/font/iconfont.css" rel="stylesheet">
     <link href="css/font_all/iconfont.css" rel="stylesheet">
     <link href="css/layout.css" rel="stylesheet">
-    <link href="css/main.css" rel="stylesheet">
+    <!-- <link href="css/main.css" rel="stylesheet"> -->
     <link href="css/recording.css" rel="stylesheet">
  
     <style>
@@ -23,7 +23,7 @@
     position: relative;
     width: 40px;
     height: 40px;
-    background: #333;
+    // background: #333;
     border-right: 1px solid #555;
     border-right-color: rgba( 255, 255, 255, .1);
     background-repeat: repeat-x;
@@ -70,9 +70,9 @@
  
 #componentWrapper .progress_bg {
     position: absolute;
-    height: 10px;
-    background: #222;
-    top: 15px;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.2);
+    top: 18px;
     left: 10px;
     right: 10px;
     -webkit-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5), 1px 1px 0 rgba( 255, 255, 255, .1);
@@ -83,9 +83,9 @@
  
 #componentWrapper .load_progress {
     position: absolute;
-    height: 10px;
+    height: 6px;
     background: #444;
-    top: 15px;
+    top: 18px;
     left: 10px;
     right: 10px;
     width: 0px;
@@ -95,9 +95,9 @@
  
 #componentWrapper .play_progress {
     position: absolute;
-    height: 10px;
-    background: #fff;
-    top: 15px;
+    height: 6px;
+    background: #1FB6FF;
+    top: 18px;
     left: 10px;
     right: 10px;
     width: 0px;
@@ -175,8 +175,8 @@
     position: relative;
     width: 80px;
     height: 40px;
-    background-image: url(./image/player_bg2_vol.png);
-    background-repeat: repeat-x;
+    // background-image: url(./image/player_bg2_vol.png);
+    // background-repeat: repeat-x;
     behavior: url(PIE.htc);
     /*display: none;*/
     cursor: pointer;
@@ -185,9 +185,9 @@
 #componentWrapper .volume_bg {
     position: absolute;
     width: 60px;
-    height: 10px;
-    background: #222;
-    bottom: 15px;
+    height: 6px;
+    background: #6B777F;
+    bottom: 16px;
     left: 10px;
     -webkit-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5), 1px 1px 0 rgba( 255, 255, 255, .1);
     box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5), 1px 1px 0 rgba( 255, 255, 255, .1);
@@ -198,9 +198,9 @@
 #componentWrapper .volume_level {
     position: absolute;
     width: 30px;
-    height: 10px;
-    background: #fff;
-    bottom: 15px;
+    height: 6px;
+    background: #1FB6FF;
+    bottom: 16px;
     left: 10px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
@@ -43,6 +43,9 @@ $(function(){
 		isPause: 1,		// 是否暂停 1:不暂停，0:暂停
 		isRcording: 0,  // 是否录制 1:录制中，0:暂停中
 		recordinit: function(codereplaytype, preload) {
+			var modeName = getMode(_languageid);
+			var modeNameItem = modeName[0];
+
 			/* #STRAT:生成CodeMirror Editor for JS/CSS/HTML */
 			var htmlid = document.getElementById('HTMLeditor'),
 				cssid = document.getElementById('CSSeditor'), 
@@ -55,7 +58,7 @@ $(function(){
 			if(htmlid&&cssid&&jsid){
 				this.htmleditor = CodeMirror.fromTextArea(htmlid, {
 				  value: '输入HTML代码',
-				  mode:  "text/html",
+				  mode:  modeNameItem,
 				  lineNumbers: true,
 				  smartIndent: false,
 				  onChange: function(em, changeobj){
@@ -258,10 +261,9 @@ $(function(){
 				jsplayerid = document.getElementById('JSplayer');
  
 			var trigger_readonly_popover = 1;
-			
 			if(htmlplayerid&&cssplayerid&&jsplayerid){
 				this.htmlplayereditor = CodeMirror.fromTextArea(htmlplayerid, {
-				  mode:  "text/html",
+				  mode:  modeNameItem,
 				  lineNumbers: true,
 				  readOnly: true,
 				  onChange: function(em, changeobj){
@@ -360,7 +362,7 @@ $(function(){
 				if (_role == 0) {
 					console.log('----========')
 					var apiUrl = gxb_api + "/programming/codeReplay/" + _codeReplayId + "/api";
-					initPlayerPage(apiUrl)
+					initPlayerPage(apiUrl);
  
 				} else if (_role == 1) {
 					var apiUrl = gxb_api + "/programming/student/studentReplay/" + _codeReplayId + "/api";
@@ -405,6 +407,7 @@ $(function(){
 		                	    }
 		                	});
 		                	var coderecords = coderecords.codeRecordList;
+
 		                }else{
 		                	$('.play-code').show();
 		                	var coderecords = coderecords.studentRecordList;
@@ -1229,7 +1232,7 @@ $(function(){
 		  	/* #END: 编辑器自适应窗口 */
 		},
 		onChange: function(editor, changeobj) {	// 监听输入事件 editor: 输入语言；changeobj：输入内容{from,text,to}
-			var intervaltime = 50,
+			var intervaltime = 100,
 				currenttime = new Date().getTime();
 			// if(!GBCodePlayBack.record_startime) GBCodePlayBack.record_startime = currenttime;
 			//根据不同的身份设置录制代码的时间间隔，当学生端输入的时候，重置间隔为100毫秒
@@ -1301,6 +1304,9 @@ $(function(){
 				        Hourglass.stopTimer();
 				    }
 				    GBCodePlayBack.triggertotal = 0;
+
+				    $('.play-code').show();
+				    $('.play-pause-code').hide();
 				}
 			}
 		},
@@ -1491,7 +1497,8 @@ $(function(){
 	})
  
 	$('.play-code').click(function(){
-		$('.play-code').attr('disabled', true);
+		$('.play-code').hide();
+		$('.play-pause-code').show();
 	    playCode();
 	    GBCodePlayBack.editable(0)
 	});
@@ -1935,6 +1942,45 @@ $(function(){
         }
 	}
  
+	function getMode(langid){
+	    var langid = parseInt(langid);
+	    var mode = [];
+	    switch (langid) {
+	        case 4:
+	            mode = ["text/x-python"];
+	            break;
+	        case 10:
+	            mode = ["text/x-java"];
+	            break;
+	        case 11:
+	            mode = ["text/x-csrc"];
+	            break;
+	        case 29:
+	            mode = ["application/x-httpd-php"];
+	            break;
+	        case 35:
+	            mode = ["text/html", "text/css", "text/javascript"];
+	            break;
+	        case 40:
+	            mode = ["text/x-sql"];
+	            break;
+	        case 43:
+	            mode = ["text/x-objectivec"];
+	            break;
+	        case 82:
+	            mode = ["text/x-c++src"];
+	            break;
+	        
+	        case 117:
+	            mode = ["text/x-rsrc"];
+	            break;
+	        default:
+	            break;
+	    }
+
+	    return mode;
+	}
+
 	// 只读和可编辑状态
 	function readStatus(roflag) {
 	    if (roflag == 1) {
@@ -12,7 +12,7 @@
     <link href="css/font/iconfont.css" rel="stylesheet">
     <link href="css/font_all/iconfont.css" rel="stylesheet">
     <link href="css/layout.css" rel="stylesheet">
-    <link href="css/main.css" rel="stylesheet">
+    <!-- <link href="css/main.css" rel="stylesheet"> -->
     <link href="css/recording.css" rel="stylesheet">
     <link rel="stylesheet" href="js/audioPlayer/theme.default.css">
  
@@ -50,7 +50,7 @@
  
     <script src="js/gbreplayer.js"></script>
     <script src="js/recording/recording.js"></script>
-    <script src="js/player.js"></script>
+    <script src="js/player1.js"></script>
  
 </head>
 <body>
@@ -128,6 +128,9 @@
             <button class="play-code" style="display: none;">
                 <i class="icon iconfont icon-play"></i>
             </button>
+            <button class="play-pause-code" style="display: none;">
+                <i class="icon iconfont icon-playcopy"></i>
+            </button>
             <button id="full-screen">
                 <i class="icon iconfont icon-fangda"></i>
             </button>
@@ -203,7 +203,7 @@ html, body{
  
 #resultoutput{
     height: 164px;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
  
 .fb{
@@ -330,12 +330,17 @@ html, body{
 }
  
 // player
+.play-page{
+    .record-wrap{
+        padding-top: 0;
+    }
+}
 #playFooter{
-    height: 60px;
+    height: 46px;
     width: 100%;
     z-index: 999;
     background-color: #23383f;
-    padding: 10px 24px;
+    padding: 4px 24px;
  
     #componentWrapper{
         width: 100%;
@@ -381,9 +386,9 @@ html, body{
     width: 40px;
     height: 40px;
     margin-left: 48px;
+    outline: none;
 }
 .play-code img{
-    width: 100%;
 }
  
 .confirm-tip{
@@ -21,6 +21,21 @@ button{
     cursor: pointer;
 }
  
+.CodeMirror{
+    width: 100%;
+}
+.CodeMirror,
+.CodeMirror * {
+    font-family: monospace !important;
+    font-size: 16px;
+}
+.row {
+    margin-right: 0px !important;
+    margin-left: 0px !important;
+}
+.col-md-8{
+    padding-left: 0 !important;
+}
  
 #player{
     width: 100%;
@@ -61,7 +76,7 @@ button{
     // }
 }
  
-.play-code{
+.play-code, .play-pause-code{
     background: transparent;
     color: #fff;
     border: none;
@@ -86,8 +101,7 @@ button{
 }
  
 .recording-page{
-    padding-top:16px;
-    
+
     .col-md-8{
         padding-right: 0;
         overflow: hidden
@@ -438,7 +452,7 @@ button{
         }
     }
     .tab-content{
-        margin: 16px;
+        overflow: auto !important;
  
         .form-control{
             border: none;
@@ -39,9 +39,9 @@
  
 </head>
 <body>
-    <div class="programing">
+    <div class="programing play-page">
         <!-- 控制条 -->
-        <div class="record-title">
+        <div class="record-title" style="display: none;">
             <ul id="recordertab" class="nav nav-tabs pull-left">
                 <li class="active" style="display: none;">
                     <a href="#recordzone" data-toggle="tab">
@@ -139,9 +139,12 @@
             <div id="playFooter">
                 <div class="" id="audioWrap">
                     <button class="play-code" style="display: none;">
-                        <img src="../img/ideicon/play.svg" alt="">
+                        <img src="../img/play.svg" alt="">
                         <!-- <i class="icon iconfont icon-play"></i> -->
                     </button>
+                    <button class="pause-play-code" style="display: none;">
+                        <img src="../img/pause.svg" alt="">
+                    </button>
                 </div>
             </div>
         </div>