diff --git a/randomwallpaper@iflow.productions/Elements.js b/randomwallpaper@iflow.productions/Elements.js index 8f2252e..ca41527 100644 --- a/randomwallpaper@iflow.productions/Elements.js +++ b/randomwallpaper@iflow.productions/Elements.js @@ -2,13 +2,16 @@ const Lang = imports.lang; const PopupMenu = imports.ui.popupMenu; const St = imports.gi.St; const Slider = imports.ui.slider; +const Tweener = imports.ui.tweener; const HistoryElement = new Lang.Class({ Name: 'HistoryElement', Extends: PopupMenu.PopupBaseMenuItem, historyId: null, - _init: function(historyId, params) { + _init: function(historyId, index, params) { + index = String(index)+'.' || '0.'; + this.parent(params); let timestamp = parseInt(historyId.slice(0, historyId.lastIndexOf('.'))); @@ -17,15 +20,27 @@ const HistoryElement = new Lang.Class({ let timeString = date.toLocaleTimeString(); let dateString = date.toLocaleDateString(); + this.label = new St.Label({ + text: index, + style_class: 'rwg-history-index' + }); + this.actor.add_child(this.label); + this._container = new St.BoxLayout({ vertical: true }); - this.label = new St.Label({ text: dateString }); - this._container.add_child(this.label); + this.dateLabel = new St.Label({ + text: dateString, + style_class: 'rwg-history-date' + }); + this._container.add_child(this.dateLabel); - this.label = new St.Label({ text: timeString }); - this._container.add_child(this.label); + this.timeLabel = new St.Label({ + text: timeString, + style_class: 'rwg-history-time' + }); + this._container.add_child(this.timeLabel); this.historyId = historyId; @@ -33,6 +48,56 @@ const HistoryElement = new Lang.Class({ } }); +const StatusElement = new Lang.Class({ + Name: 'StatusElement', + Extends: St.Icon, + + _init: function() { + + this.parent({ + icon_name: 'preferences-desktop-wallpaper-symbolic', + style_class: 'rwg_system_status_icon' + }); + + let _this = this; + + this.loadingTweenIn = { + opacity:20, + time:1, + transition:'easeInOutSine', + onComplete: function() { + Tweener.addTween(_this, _this.loadingTweenOut); + } + } + + this.loadingTweenOut = { + opacity:255, + time:1, + transition:'easeInOutSine', + onComplete: function() { + if (_this.isLoading) { + Tweener.addTween(_this, _this.loadingTweenIn); + } else { + return false; + } + return true; + } + } + + }, + + startLoading: function() { + this.isLoading = true; + Tweener.addTween(this, this.loadingTweenOut); + }, + + stopLoading: function() { + this.isLoading = false; + Tweener.removeTweens(this); + } + +}); + // ------------------------------------------------------------------------------- // borrowed from: https://github.com/eonpatapon/gnome-shell-extensions-mediaplayer diff --git a/randomwallpaper@iflow.productions/extension.js b/randomwallpaper@iflow.productions/extension.js index 3287671..ab1a350 100644 --- a/randomwallpaper@iflow.productions/extension.js +++ b/randomwallpaper@iflow.productions/extension.js @@ -10,6 +10,7 @@ const St = imports.gi.St; const PanelMenu = imports.ui.panelMenu; const PopupMenu = imports.ui.popupMenu; const CustomElements = Self.imports.Elements; +const Tweener = imports.ui.tweener; // Filesystem const Gio = imports.gi.Gio; @@ -39,16 +40,14 @@ let RandomWallpaperEntry = new Lang.Class({ style_class: 'rwg_status_icon' });*/ - let icon = new St.Icon({ - icon_name: 'preferences-desktop-wallpaper-symbolic', - style_class: 'rwg_system_status_icon' + this.statusIcon = new CustomElements.StatusElement(); + this.actor.add_child(this.statusIcon); + + let newWallpaperItem = new PopupMenu.PopupMenuItem('New Wallpaper', { + style_class: 'rwg-new-lable' }); - this.actor.add_child(icon); - - let menu_item = new PopupMenu.PopupMenuItem('New Wallpaper'); - - this.menu.addMenuItem(menu_item, 1); + this.menu.addMenuItem(newWallpaperItem, 1); this.menu.addMenuItem(new PopupMenu.PopupSeparatorMenuItem()); this.historySection = new PopupMenu.PopupMenuSection(); @@ -62,8 +61,10 @@ let RandomWallpaperEntry = new Lang.Class({ // add eventlistener let _this = this; - menu_item.actor.connect('button-press-event', function() { + newWallpaperItem.actor.connect('button-press-event', function() { + _this.statusIcon.startLoading(); wallpaperController.fetchNewWallpaper(function() { + _this.statusIcon.stopLoading(); _this.setHistoryList(); }); }); @@ -85,9 +86,9 @@ let RandomWallpaperEntry = new Lang.Class({ this.clearHistory(); }; - for (var i = 0; i < history.length; i++) { + for (var i = 1; i < history.length; i++) { let historyid = history[i]; - let tmp = new CustomElements.HistoryElement(historyid); + let tmp = new CustomElements.HistoryElement(historyid, i); tmp.actor.connect('key-focus-in', function(actor) { wallpaperController.previewWallpaper(historyid); @@ -97,6 +98,10 @@ let RandomWallpaperEntry = new Lang.Class({ wallpaperController.setWallpaper(historyid); }); + tmp.actor.connect('button-press-event', function(actor) { + wallpaperController.setWallpaper(historyid); + }); + this.historySection.addMenuItem(tmp); }; diff --git a/randomwallpaper@iflow.productions/stylesheet.css b/randomwallpaper@iflow.productions/stylesheet.css index 636bcec..2e7a466 100644 --- a/randomwallpaper@iflow.productions/stylesheet.css +++ b/randomwallpaper@iflow.productions/stylesheet.css @@ -1,26 +1,27 @@ -.helloworld-label { - font-size: 36px; - font-weight: bold; - color: #ffffff; - background-color: rgba(10,10,10,0.7); - border-radius: 5px; - padding: .5em; -} - .rwg_system_status_icon { /*icon-size: 1.09em;*/ icon-size: 1em; /*padding: 0 5px;*/ - padding: 0 0; + padding: 0 0; + position: absolute; + -webkit-animation:spin 4s linear infinite; + -moz-animation:spin 4s linear infinite; + animation:spin 4s linear infinite; } -.rwg-lable { - width: 100%; - font-weight: bold; - /*font-size: 110%;*/ - text-align: left; - border: 0; +@-moz-keyframes spin { + 100% { -moz-transform: rotate(360deg); } +} +@-webkit-keyframes spin { + 100% { -webkit-transform: rotate(360deg); } +} +@keyframes spin { + 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } +} + +.rwg-new-lable { + font-size: 130%; } .rwg-recent-lable { @@ -29,4 +30,21 @@ font-size: 90%; text-align: left; border: 0; +} + +.rwg-history-index { + padding-top: .35em; + font-size: 130%; + font-weight: lighter; +} + +.rwg-history-date { + /*padding-top: .35em;*/ + font-size: 100%; +} + +.rwg-history-time { + /*padding-top: .35em;*/ + font-size: 100%; + font-weight: lighter; } \ No newline at end of file