Changeset 3676
- Timestamp:
- 07/01/07 21:10:28 (1 year ago)
- Files:
-
- trunk/Plug-Ins/Web Interface/Resources/iphone/images/squareBlueButton.png (added)
- trunk/Plug-Ins/Web Interface/Resources/iphone/index.html (modified) (1 diff)
- trunk/Plug-Ins/Web Interface/Resources/iphone/iphone.css (modified) (11 diffs)
- trunk/Plug-Ins/Web Interface/Resources/iphone/iphone.js (modified) (10 diffs)
Legend:
- Unmodified
- Added
- Removed
- Modified
- Copied
- Moved
trunk/Plug-Ins/Web Interface/Resources/iphone/index.html
r3673 r3676 16 16 <body> 17 17 <div id="pandown"> 18 <a href="#bottom"> Pan upto show full screen.</a>18 <a href="#bottom">Click to show full screen.</a> 19 19 </div> 20 20 <div id="main"> 21 <div id="header"><div id="back" class="back">Colloquy</div><div id="join" class="button">+</div><div id="members" class="button"><img></div><div id="main-title">Colloquy</div><div id="colloquy-title">webkit</div></div>21 <div class="header"><div id="back" class="back">Colloquy</div><div id="join" class="button">+</div><div id="members" class="button"><img></div><div id="main-title">Colloquy</div><div id="colloquy-title">webkit</div></div> 22 22 <div id="colloquies"></div> 23 23 </div> trunk/Plug-Ins/Web Interface/Resources/iphone/iphone.css
r3670 r3676 37 37 } 38 38 39 #header {39 .header { 40 40 position: relative; 41 41 height: 44px; … … 56 56 } 57 57 58 #header .button {58 .header .button { 59 59 position: absolute; 60 60 font-weight: bold; … … 67 67 min-height: 29px; 68 68 min-width: 32px; 69 line-height: 26px; 70 font-size: 18px; 69 font-size: 12px; 71 70 text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0; 71 font-weight: bold; 72 line-height: 28px; 72 73 color: white; 73 74 z-index: 100; … … 76 77 box-sizing: border-box; 77 78 text-align: center; 78 }79 80 #header .button:active {81 -webkit-border-image: url(images/buttonPressed.png) 0 8 0 8;82 79 } 83 80 … … 90 87 margin-top: 5px; 91 88 content: url(images/person.png); 89 } 90 91 #join { 92 line-height: 26px; 93 font-size: 18px; 94 padding-left: 1px; 92 95 } 93 96 … … 111 114 } 112 115 113 .back:active {114 -webkit-border-image: url(images/backButtonPressed.png) 0 8 0 14;115 }116 117 116 .forward { 118 117 position: absolute; … … 134 133 } 135 134 136 . forward:active{137 -webkit-border-image: url(images/ forwardButtonPressed.png) 0 140 8;135 .header .button.action { 136 -webkit-border-image: url(images/squareBlueButton.png) 0 8 0 8; 138 137 } 139 138 … … 184 183 background-color: white; 185 184 width: 100%; 186 height: 33 4px;185 height: 335px; 187 186 overflow: auto; 188 187 } … … 222 221 } 223 222 223 .colloquy-members { 224 position: absolute; 225 top: 416px; 226 left: 0; 227 width: 320px; 228 height: 416px; 229 background-color: white; 230 display: none; 231 z-index: 200; 232 } 233 234 .colloquy-members-title { 235 text-align: right; 236 -webkit-box-sizing: border-box; 237 box-sizing: border-box; 238 margin-left: 10px; 239 margin-right: 70px; 240 white-space: nowrap; 241 overflow: hidden; 242 text-overflow: ellipsis; 243 } 244 245 .colloquy-member-list { 246 width: 100%; 247 height: 372px; 248 overflow: auto; 249 padding: 8px; 250 -webkit-box-sizing: border-box; 251 box-sizing: border-box; 252 } 253 224 254 .colloquy { 225 255 position: relative; 226 256 height: 48px; 227 257 padding: 8px; 228 border-bottom: 1px solid rgb( 66%, 66%, 66%);258 border-bottom: 1px solid rgb(75%, 75%, 75%); 229 259 } 230 260 … … 344 374 .message-wrapper { 345 375 padding: 4px 8px; 346 border-bottom: 1px solid rgb( 66%, 66%, 66%);376 border-bottom: 1px solid rgb(75%, 75%, 75%); 347 377 } 348 378 … … 357 387 -khtml-nbsp-mode: space; 358 388 } 389 390 .colloquy-member-list .member { 391 margin-bottom: 3px; 392 } 393 394 .colloquy-member-list .member:before { 395 width: 16px; 396 height: 16px; 397 content: url(/resources/person.png); 398 vertical-align: middle; 399 margin-right: 4px; 400 } 401 402 .colloquy-member-list .member.server.operator:before { 403 content: url( /resources/admin.png ); 404 } 405 406 .colloquy-member-list .member.operator:before { 407 content: url( /resources/op.png ); 408 } 409 410 .colloquy-member-list .member.administrator:before { 411 content: url( /resources/super-op.png ); 412 } 413 414 .colloquy-member-list .member.founder:before { 415 content: url( /resources/founder.png ); 416 } 417 418 .colloquy-member-list .member.half.operator:before { 419 content: url( /resources/half-op.png ); 420 } 421 422 .colloquy-member-list .member.voice:before { 423 content: url( /resources/voice.png ); 424 } trunk/Plug-Ins/Web Interface/Resources/iphone/iphone.js
r3675 r3676 12 12 13 13 this.joinElement = $("join"); 14 14 15 this.membersElement = $("members"); 16 this.membersElement.addEventListener("click", function(event) { ChatController.activePanel.showMembersList(event) }, false); 15 17 16 18 new Image().src = "images/bottomShadow.png"; … … 18 20 new Image().src = "images/blueGradient.png"; 19 21 new Image().src = "images/backButton.png"; 20 new Image().src = "images/backButtonPressed.png";21 22 new Image().src = "images/button.png"; 22 new Image().src = "images/ buttonPressed.png";23 new Image().src = "images/squareBlueButton.png"; 23 24 new Image().src = "images/person.png"; 24 25 new Image().src = "images/messagesNormalSmall.png"; … … 114 115 Colloquy.membersElement.style.display = null; 115 116 116 ChatController.activePanel. keyboardVisible(false);117 ChatController.activePanel.setKeyboardVisible(false); 117 118 ChatController.activePanel.active = false; 118 119 … … 365 366 366 367 var animations = [{element: Colloquy.backElement, end: {left: 6, opacity: 1}}, 367 {element: Colloquy.joinElement, end: {opacity: 0}}, {element: Colloquy.membersElement, end: {opacity: 1}},368 {element: Colloquy.joinElement, end: {opacity: 0}}, 368 369 {element: Colloquy.colloquyTitleElement, end: {left: 0, opacity: 1}}, 369 370 {element: Colloquy.mainTitleElement, end: {left: -110, top: 6, "font-size": 12, "line-height": 28}}, 370 371 {element: Colloquy.colloquiesElement, end: {left: -321}}, {element: this.panelElement, end: {left: 0}}]; 372 373 if (this.type == "JVChatRoomPanel") 374 animations.push({element: Colloquy.membersElement, end: {opacity: 1}}); 371 375 372 376 Colloquy.backElement.style.display = "block"; … … 436 440 form.appendChild(this.panelInputElement); 437 441 438 this.panelInputElement.addEventListener("focus", function(event) { panel. keyboardVisible(true) }, false);439 this.panelInputElement.addEventListener("blur", function(event) { panel. keyboardVisible(false) }, false);442 this.panelInputElement.addEventListener("focus", function(event) { panel.setKeyboardVisible(true) }, false); 443 this.panelInputElement.addEventListener("blur", function(event) { panel.setKeyboardVisible(false) }, false); 440 444 441 445 this.panelInputBarElement.appendChild(form); … … 457 461 } 458 462 459 DirectChatPanel.prototype.keyboardVisible = function(visible) { 463 DirectChatPanel.prototype.setKeyboardVisible = function(visible) { 464 this.keyboardVisible = visible; 465 460 466 if( visible ) { 461 467 this.panelTranscriptElement.style.height = "119px"; … … 618 624 619 625 function ChatRoomPanel( node ) { 626 var panel = this; 627 620 628 ChatRoomPanel.baseConstructor.call( this, node ); 621 629 … … 624 632 this.menuElement.removeClassName( "directChat" ); 625 633 this.menuElement.addClassName( "chatRoom" ); 634 635 this.membersElement = $(document.createElement("div")); 636 this.membersElement.className = "colloquy-members"; 637 638 var header = document.createElement("div"); 639 header.className = "header"; 640 641 var title = document.createElement("div"); 642 title.className = "colloquy-members-title"; 643 title.textContent = this.name + " Members"; 644 645 header.appendChild(title); 646 647 var done = document.createElement("div"); 648 done.className = "button action"; 649 done.textContent = "Done"; 650 651 done.addEventListener("click", function(event) { panel.hideMembersList(event) }, false); 652 653 header.appendChild(done); 654 655 this.membersElement.appendChild(header); 656 657 this.membersListElement = document.createElement("div"); 658 this.membersListElement.className = "colloquy-member-list"; 659 660 this.membersElement.appendChild(this.membersListElement); 661 662 Colloquy.mainElement.appendChild(this.membersElement); 626 663 627 664 this.members = new Array(); … … 641 678 642 679 this.members.push( member ); 680 681 var memberElement = document.createElement( "div" ); 682 memberElement.title = member.hostmask; 683 memberElement.className = "member" + ( member.type ? " " + member.type : "" ); 684 memberElement.textContent = member.name + " "; 685 686 this.membersListElement.appendChild(memberElement); 643 687 } 644 688 } … … 646 690 extendClass( ChatRoomPanel, DirectChatPanel ); 647 691 648 ChatRoomPanel.prototype.toggleMemberList = function() { 649 // not implemented 650 } 692 ChatRoomPanel.prototype.showMembersList = function(event) { 693 if (this.showingMembers) 694 return; 695 696 this.showingMembers = true; 697 698 var animations = [{element: this.membersElement, end: {top: 0}}]; 699 700 this.membersElement.style.display = "block"; 701 702 Colloquy.animateStyle(animations, (event.shiftKey ? 2500 : 250)); 703 } 704 705 ChatRoomPanel.prototype.hideMembersList = function(event) { 706 if (!this.showingMembers) 707 return; 708 709 var animations = [{element: this.membersElement, end: {top: 416}}]; 710 711 this.membersElement.style.display = "block"; 712 713 var panel = this; 714 var animateStyleFinished = function() { 715 delete panel.showingMembers; 716 }; 717 718 Colloquy.animateStyle(animations, (event.shiftKey ? 2500 : 250), animateStyleFinished); 719 }
