Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Working towards retina version of Skype.

  • Loading branch information...
commit 1069abc51b8361bb688f128056fb5f9b900ab3e9 1 parent 6264629
@miekd authored
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  .gitignore
@@ -1,2 +1,3 @@
.DS_Store
*.zip
+.sass-cache/
View
11 Brief.SkypeChatStyle/Contents/Resources/Conversation.html
@@ -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>
View
41 Brief.SkypeChatStyle/Contents/Resources/css/main.css
@@ -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; } }
View
57 Brief.SkypeChatStyle/Contents/Resources/css/main.scss
@@ -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;
+ }
}
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_arrow_down@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_arrow_right@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_cancel@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_edit@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_edited@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_pause@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_play@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_quicklook@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_refresh@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_reveal@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_stop@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_sub@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/icon_warning@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/transfer-32@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/transfer-multiple-32@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  Brief.SkypeChatStyle/Contents/Resources/gfx/typing-16x16-white@2x.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
163 Brief.SkypeChatStyle/Contents/Resources/js/jquery.sprite.js
@@ -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);
View
90 Brief.SkypeChatStyle/Contents/Resources/js/retina.js
@@ -0,0 +1,90 @@
+/**
+ * @fileoverview Skype Retina
+ * @author Thibault Martin-Lagardette
+ * @version 1.0
+*/
+
+function changeSKCGPropertyToUseRetina(el, property, isPropertyCSS, useRetina)
+{
+ var src;
+ if (isPropertyCSS === false) {
+ src = el[property];
+ }
+ else {
+ src = $(el).css(property);
+ }
+
+ if (typeof src === "undefined") {
+ console.log("Could not find property: " + property);
+ return ;
+ }
+
+ var newSrc = null;
+
+ if (src.search("skcg") !== -1) {
+ oldRegexp = new RegExp("retina=" + (useRetina === 1 ? 0 : 1));
+
+ if (src.search(oldRegexp) !== -1) {
+ newSrc = src.replace(oldRegexp, "retina=" + useRetina);
+ }
+ else {
+ console.log("Could not find retina in: " + src);
+ }
+ }
+ else {
+ if (useRetina === 1 && src.search("@2x.png") === -1) {
+ newSrc = src.replace(/\.png/, "@2x.png");
+ }
+ else if (useRetina === 0 && src.search("@2x.png") !== -1) {
+ newSrc = src.replace(/@2x\.png/, ".png");
+ }
+ else {
+ console.log("Could not find how to switch retinaness of: " + src);
+ }
+ }
+
+ if (newSrc !== null) {
+ if (isPropertyCSS === true) {
+ $(el).css(property, newSrc);
+ }
+ else {
+ el[property] = newSrc;
+ }
+ }
+}
+
+function updateImagesForCurrentScaleFactor(scaleFactor) {
+ scaleFactor = scaleFactor || window.devicePixelRatio;
+ if (scaleFactor >= 2) {
+ $("img.avatar").each(function(idx, el) {
+ changeSKCGPropertyToUseRetina(el, "src", false, 1);
+ });
+ $("img.icon").each(function(idx, el) {
+ changeSKCGPropertyToUseRetina(el, "src", false, 1);
+ });
+ $(".flag").each(function(idx, el) {
+ changeSKCGPropertyToUseRetina(el, "src", false, 1);
+ });
+ $(".emoticon").each(function(idx, el) {
+ changeSKCGPropertyToUseRetina(el, "background-image", true, 1);
+ });
+ }
+ else {
+ $("img.avatar").each(function(idx, el) {
+ changeSKCGPropertyToUseRetina(el, "src", false, 0);
+ });
+ $("img.icon").each(function(idx, el) {
+ changeSKCGPropertyToUseRetina(el, "src", false, 0);
+ });
+ $(".flag").each(function(idx, el) {
+ changeSKCGPropertyToUseRetina(el, "src", false, 0);
+ });
+ $(".emoticon").each(function(idx, el) {
+ changeSKCGPropertyToUseRetina(el, "background-image", true, 0);
+ });
+ }
+}
+
+$(function() {
+ updateImagesForCurrentScaleFactor();
+});
Please sign in to comment.
Something went wrong with that request. Please try again.