mirror of
https://github.com/Hopiu/RandomWallpaperGnome3.git
synced 2026-03-16 22:20:24 +00:00
added simple loading indicator
This commit is contained in:
Wolfgang R
parent
428bb1f46a
commit
7be6bb5f09
3 changed files with 120 additions and 32 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue