Permalink
Browse files

Working towards retina version of Skype.

  • Loading branch information...
miekd committed Oct 24, 2012
1 parent 6264629 commit 1069abc51b8361bb688f128056fb5f9b900ab3e9
Showing with 356 additions and 7 deletions.
  1. +1 −0 .gitignore
  2. +7 −4 Brief.SkypeChatStyle/Contents/Resources/Conversation.html
  3. +41 −0 Brief.SkypeChatStyle/Contents/Resources/css/main.css
  4. +54 −3 Brief.SkypeChatStyle/Contents/Resources/css/main.scss
  5. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_arrow_down@2x.png
  6. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_arrow_right@2x.png
  7. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_cancel@2x.png
  8. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_edit@2x.png
  9. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_edited@2x.png
  10. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_pause@2x.png
  11. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_play@2x.png
  12. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_quicklook@2x.png
  13. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_refresh@2x.png
  14. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_reveal@2x.png
  15. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_stop@2x.png
  16. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_sub@2x.png
  17. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/icon_warning@2x.png
  18. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/transfer-32@2x.png
  19. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/transfer-multiple-32@2x.png
  20. BIN Brief.SkypeChatStyle/Contents/Resources/gfx/typing-16x16-white@2x.gif
  21. +163 −0 Brief.SkypeChatStyle/Contents/Resources/js/jquery.sprite.js
  22. +90 −0 Brief.SkypeChatStyle/Contents/Resources/js/retina.js
View
@@ -1,2 +1,3 @@
.DS_Store
*.zip
+.sass-cache/
@@ -1,16 +1,19 @@
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
-
+
<meta charset="utf-8" />
<title>Brief 1.5 &mdash; Skype 5 Chat Style</title>
-
+
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
-
+
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
+ <script src="js/jquery.sprite.js"></script>
+ <script src="js/retina.js"></script>
+
<script>
- var debug = true;
+ var debug = false;
</script>
</head>
@@ -1032,3 +1032,44 @@ body {
#conversation .alert .body:before,
#conversation .emote .body:before {
left: 3px; } }
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+ .quicklook:after {
+ background-image: url(../gfx/icon_quicklook@2x.png);
+ background-size: 30px 30px; }
+
+ .reveal:after {
+ background-image: url(../gfx/icon_reveal@2x.png);
+ background-size: 30px 30px; }
+
+ .delete:after,
+ .cancel:after {
+ background-image: url(../gfx/icon_cancel@2x.png);
+ background-size: 30px 30px; }
+
+ .edit:after {
+ background-image: url(../gfx/icon_edit@2x.png);
+ background-size: 30px 30px; }
+
+ .play:after {
+ background-image: url(../gfx/icon_play@2x.png);
+ background-size: 30px 30px; }
+
+ .pause:after {
+ background-image: url(../gfx/icon_pause@2x.png);
+ background-size: 30px 30px; }
+
+ .stop:after {
+ background-image: url(../gfx/icon_stop@2x.png);
+ background-size: 30px 30px; }
+
+ .sub:before {
+ background-image: url(../gfx/icon_sub@2x.png);
+ background-size: 30px 30px; }
+
+ .instance:not(:last-child) img[src*="multiple"] ~ .name {
+ background-image: url(../gfx/icon_arrow_right@2x.png);
+ background-size: 30px 30px; }
+
+ .instance:not(:last-child) img[src*="multiple"] ~ .name.open {
+ background-image: url(../gfx/icon_arrow_down@2x.png);
+ background-size: 30px 30px; } }
@@ -332,8 +332,6 @@ button:not(.pill) {
}
-
-
.played,
.duration {
font-size: 11px;
@@ -991,7 +989,6 @@ body {
}
-
.transfer {
&.out .completed .name {
width: 280px;
@@ -1319,4 +1316,58 @@ body {
}
}
+}
+
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+ .quicklook:after {
+ background-image: url(../gfx/icon_quicklook@2x.png);
+ background-size: 30px 30px;
+ }
+
+ .reveal:after {
+ background-image: url(../gfx/icon_reveal@2x.png);
+ background-size: 30px 30px;
+ }
+
+ .delete:after,
+ .cancel:after {
+ background-image: url(../gfx/icon_cancel@2x.png);
+ background-size: 30px 30px;
+ }
+
+ .edit:after {
+ background-image: url(../gfx/icon_edit@2x.png);
+ background-size: 30px 30px;
+ }
+
+ .play:after {
+ background-image: url(../gfx/icon_play@2x.png);
+ background-size: 30px 30px;
+ }
+
+ .pause:after {
+ background-image: url(../gfx/icon_pause@2x.png);
+ background-size: 30px 30px;
+ }
+
+ .stop:after {
+ background-image: url(../gfx/icon_stop@2x.png);
+ background-size: 30px 30px;
+ }
+
+ .sub:before {
+ background-image: url(../gfx/icon_sub@2x.png);
+ background-size: 30px 30px;
+ }
+
+ .instance:not(:last-child) img[src*="multiple"] ~ .name {
+ background-image: url(../gfx/icon_arrow_right@2x.png);
+ background-size: 30px 30px;
+ }
+
+ .instance:not(:last-child) img[src*="multiple"] ~ .name.open {
+ background-image: url(../gfx/icon_arrow_down@2x.png);
+ background-size: 30px 30px;
+ }
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,163 @@
+/**
+ * sprite plugin
+ *
+ * @copy Copyright (c) 2012 Skype Limited
+ * @author Martin Kapp <skype:kappmartin>
+ * @author Thibault Martin-Lagardette
+ */
+(function($) {
+
+ /**
+ * @constructor Extend jQuery elements set here with 'sprite' function
+ */
+ $.fn.extend({
+ sprite: function(options) {
+ // Apply to each element matched with selector
+ return this.each(function() {
+ var newOptions = $.extend({}, $.sprite.defaults, options);
+ $.sprite(this, newOptions);
+ });
+ },
+ unsprite: function() {
+ return this.each(function() {
+ $.unsprite(this);
+ });
+ },
+ deleteSprite: function() {
+ return this.each(function() {
+ $.deleteSprite(this);
+ });
+ },
+ sprite_debug: function() {
+ console.log(SpriteCore);
+ }
+ });
+
+
+ var SpriteCore = {
+ animations: [],
+ timer: null,
+ addAnimation: function(el, options) {
+ // Add animation timer if it doesn't already exist
+ SpriteCore.resumeAnimations();
+
+ var sprite_id = $(el).data('sprite_id');
+
+ // If the animation already exist, just run it :)
+ // Otherwise, let's create it.
+ if ((typeof sprite_id !== "undefined") && (typeof this.animations[sprite_id] !== "undefined")) {
+ this.animations[sprite_id].running = true;
+ }
+ else {
+ var obj = {
+ element: el,
+ current_frame: 0,
+ no_of_frames: options.no_of_frames,
+ frame_width: $(el).width(),
+ running: true
+ };
+ if ((typeof sprite_id === "undefined")) {
+ var index = this.animations.push(obj) - 1;
+ $(el).data('sprite_id', index);
+ }
+ else {
+ this.animations[sprite_id] = obj;
+ }
+ }
+ },
+ removeAnimation: function(el) {
+ var sprite_id = $(el).data('sprite_id');
+ if (typeof sprite_id !== "undefined" && typeof this.animations[sprite_id] !== "undefined") {
+ this.animations[sprite_id].running = false;
+ }
+ },
+ deleteSprite: function(el) {
+ var sprite_id = $(el).data('sprite_id');
+ if (typeof sprite_id !== "undefined" && typeof this.animations[sprite_id] !== "undefined") {
+ this.animations[sprite_id] = undefined;
+ }
+ },
+ pauseAnimations: function() {
+ if (this.timer) {
+ clearTimeout(this.timer);
+ this.timer = null;
+ }
+ },
+ resumeAnimations: function() {
+ if (this.timer === null) {
+ this.timer = setTimeout(function() {
+ SpriteCore.updateFrame();
+ }, 1000 / $.sprite.defaults.fps);
+ }
+ },
+ updateFrame: function() {
+ for (var x in this.animations) {
+ if (!this.animations.hasOwnProperty(x)) {
+ continue;
+ }
+
+ var d = this.animations[x];
+ if (typeof d !== "undefined" && d.running === true) {
+ if (++d.current_frame >= d.no_of_frames) {
+ d.current_frame = 0;
+ }
+ $(this.animations[x].element).css('backgroundPosition', '0 ' + (-(d.current_frame * d.frame_width)) + 'px');
+ this.animations[x].current_frame = d.current_frame;
+ }
+ }
+
+ this.timer = null;
+ SpriteCore.resumeAnimations();
+ },
+ x: 0
+ };
+
+ /**
+ * $.sprite class that is applied to all the elements found with the selectors.
+ *
+ * @class The actual sprite class
+ * @param element The input field to attach the sprite results
+ * @param options Options for the sprite class
+ */
+ $.sprite = function(/**HTMLElement*/ element, /**Object*/ options) {
+ options.current_frame = 0;
+ options.frame_height = $(element).height();
+ options.frame_width = $(element).width();
+
+ var str = $(element).css("background-image");
+ var i = new Image();
+ var h, w;
+ var expectedWidth = parseInt($(element).css("width"), 10);
+
+ i.src = str.replace(/^url\(\"?([^"]+)\"?\)$/, "$1");
+ i.onload = function() {
+ divider = parseInt(i.width / expectedWidth, 10);
+ h = i.height / divider;
+ w = i.width / divider;
+
+ options.no_of_frames = (options.dir == 'vertical') ? (h / options.frame_height)|0 : (w / options.frame_width)|0;
+ SpriteCore.addAnimation(element, options);
+ };
+ };
+
+ $.unsprite = function(/**HTMLElement*/ element) {
+ SpriteCore.removeAnimation(element);
+ };
+
+ $.deleteSprite = function(/**HTMLElement*/ element) {
+ SpriteCore.deleteSprite(element);
+ };
+
+ $.pauseAnimations = function() {
+ SpriteCore.pauseAnimations();
+ };
+
+ $.resumeAnimations = function() {
+ SpriteCore.resumeAnimations();
+ };
+
+ $.sprite.defaults = {
+ fps: 24,
+ dir: 'vertical'
+ };
+})(jQuery);
Oops, something went wrong.

0 comments on commit 1069abc

Please sign in to comment.