[gnome-sound-recorder] mainWindow: migrate to use glade



commit 7c6ef0a3e11a09e52f835c0d322d5fb58dedd7fb
Author: Kavan Mevada <kavanmevada gmail com>
Date:   Fri Mar 27 16:54:38 2020 +0000

    mainWindow: migrate to use glade
    
    Part of #65

 data/org.gnome.SoundRecorder.data.gresource.xml |   1 +
 data/ui/window.ui                               | 170 ++++++++++++++++++++++++
 po/POTFILES.in                                  |   1 +
 src/mainWindow.js                               | 149 +++++----------------
 4 files changed, 208 insertions(+), 113 deletions(-)
---
diff --git a/data/org.gnome.SoundRecorder.data.gresource.xml b/data/org.gnome.SoundRecorder.data.gresource.xml
index c0306b2..7794c0e 100644
--- a/data/org.gnome.SoundRecorder.data.gresource.xml
+++ b/data/org.gnome.SoundRecorder.data.gresource.xml
@@ -2,6 +2,7 @@
 <gresources>
   <gresource prefix="/org/gnome/SoundRecorder">
     <file>application.css</file>
+    <file>ui/window.ui</file>
   </gresource>
 </gresources>
 
diff --git a/data/ui/window.ui b/data/ui/window.ui
new file mode 100644
index 0000000..013c704
--- /dev/null
+++ b/data/ui/window.ui
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.0 -->
+<interface>
+  <requires lib="gtk+" version="3.12"/>
+  <template class="Gjs_MainWindow" parent="GtkApplicationWindow">
+    <property name="width_request">640</property>
+    <property name="height_request">480</property>
+    <property name="can_focus">False</property>
+    <property name="hexpand">True</property>
+    <property name="vexpand">True</property>
+    <property name="default_width">780</property>
+    <property name="default_height">480</property>
+    <child>
+      <object class="GtkStack" id="mainStack">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <child>
+          <object class="GtkGrid" id="mainView">
+            <property name="can_focus">False</property>
+          </object>
+          <packing>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkGrid" id="emptyView">
+            <property name="can_focus">False</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
+            <child>
+              <object class="GtkGrid">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <property name="hexpand">True</property>
+                <property name="vexpand">True</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="can_focus">False</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="icon_name">audio-input-microphone-symbolic</property>
+                    <property name="icon_size">6</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">0</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="can_focus">False</property>
+                    <property name="label" translatable="yes">Use the &lt;b&gt;Record&lt;/b&gt; button to 
make sound recordings</property>
+                    <property name="use_markup">True</property>
+                    <property name="max_width_chars">30</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">2</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="can_focus">False</property>
+                    <property name="label" translatable="yes">Add Recordings</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">1</property>
+                  </packing>
+                </child>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">0</property>
+              </packing>
+            </child>
+          </object>
+          <packing>
+            <property name="position">1</property>
+          </packing>
+        </child>
+    </object>
+  </child>
+    <child type="titlebar">
+      <object class="GtkHeaderBar" id="headerBar">
+        <property name="can_focus">False</property>
+        <property name="title" translatable="yes">Sound Recorder</property>
+        <property name="show_close_button">True</property>
+        <child>
+          <object class="GtkButton" id="recordButton">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">False</property>
+            <property name="valign">center</property>
+            <property name="always_show_image">True</property>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="spacing">4</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="icon_name">media-record-symbolic</property>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">0</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="margin_end">4</property>
+                    <property name="label" translatable="yes">Record</property>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">1</property>
+                  </packing>
+                </child>
+              </object>
+            </child>
+            <style>
+              <class name="suggested-action"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkMenuButton" id="appMenuButton">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">False</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="icon_name">open-menu-symbolic</property>
+                <property name="icon_size">1</property>
+              </object>
+            </child>
+            <style>
+              <class name="image-button"/>
+            </style>
+          </object>
+          <packing>
+            <property name="pack_type">end</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
diff --git a/po/POTFILES.in b/po/POTFILES.in
index ac40361..1b2f521 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -1,6 +1,7 @@
 data/appdata/org.gnome.SoundRecorder.appdata.xml.in.in
 data/org.gnome.SoundRecorder.gschema.xml.in
 data/org.gnome.SoundRecorder.desktop.in.in
+data/ui/window.ui
 src/audioProfile.js
 src/application.js
 src/fileUtil.js
diff --git a/src/mainWindow.js b/src/mainWindow.js
index bbb1af3..2ae4494 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -40,16 +40,12 @@ const Waveform = imports.waveform;
 let activeProfile = null;
 var audioProfile = null;
 var displayTime = null;
-let groupGrid;
-let header;
 var list = null;
 let loadMoreButton = null;
 var offsetController = null;
 var play = null;
 let previousSelRow = null;
 var recordPipeline = null;
-let recordButton = null;
-let appMenuButton = null;
 let setVisibleID = null;
 let UpperBoundVal = 182;
 var view = null;
@@ -77,37 +73,26 @@ var RecordPipelineStates = {
 const _TIME_DIVISOR = 60;
 var _SEC_TIMEOUT = 100;
 
-var MainWindow = GObject.registerClass(class MainWindow extends Gtk.ApplicationWindow {
+var MainWindow = GObject.registerClass({
+    Template: 'resource:///org/gnome/SoundRecorder/ui/window.ui',
+    InternalChildren: ['recordButton', 'appMenuButton', 'mainStack', 'mainView', 'emptyView'],
+}, class MainWindow extends Gtk.ApplicationWindow {
+
     _init(params) {
         audioProfile = new AudioProfile.AudioProfile();
         offsetController = new FileUtil.OffsetController();
         displayTime = new FileUtil.DisplayTime();
-        view = new MainView();
+        view = this;
+        this._addListviewPage();
+        this.labelID = null;
         play = new Play.Play();
 
         super._init(Object.assign({
-            title: GLib.get_application_name(),
-            default_height: 480,
-            default_width: 780,
-            height_request: 480,
-            width_request: 640,
-            hexpand: true,
-            vexpand: true,
             icon_name: pkg.name,
         }, params));
 
-        header = new Gtk.HeaderBar({ hexpand: true,
-            show_close_button: true });
-        this.set_titlebar(header);
-        header.get_style_context().add_class('titlebar');
-
-        recordButton = new RecordButton({ label: _('Record') });
-        recordButton.get_style_context().add_class('suggested-action');
-        header.pack_start(recordButton);
-
+        this._recordButton.connect('clicked', () => this._onRecord());
         this._addAppMenu();
-
-        this.add(view);
         this.show_all();
     }
 
@@ -115,65 +100,39 @@ var MainWindow = GObject.registerClass(class MainWindow extends Gtk.ApplicationW
         let menu = new Gio.Menu();
         menu.append(_('Preferences'), 'app.preferences');
         menu.append(_('About Sound Recorder'), 'app.about');
-
-        appMenuButton = new Gtk.MenuButton({
-            image: new Gtk.Image({ icon_name: 'open-menu-symbolic' }),
-            menu_model: menu,
-        });
-        header.pack_end(appMenuButton);
+        this._appMenuButton.set_menu_model(menu);
     }
-});
 
-const MainView = GObject.registerClass(class MainView extends Gtk.Stack {
-    _init(params) {
-        super._init(Object.assign({
-            vexpand: true,
-            transition_type: Gtk.StackTransitionType.CROSSFADE,
-            transition_duration: 100,
-            visible: true,
-        }, params));
+    _onRecord() {
+        view.destroyLoadMoreButton();
+        view.hasPreviousSelRow();
 
-        this._addListviewPage('listviewPage');
-        this.labelID = null;
+        if (view.listBox)
+            view.listBox.set_selection_mode(Gtk.SelectionMode.NONE);
+        else
+            this._mainStack.set_visible_child(this._mainView);
+
+        this._recordButton.set_sensitive(false);
+        setVisibleID = ActiveArea.RECORD;
+        view.recordGrid.show_all();
+
+        if (activeProfile === null)
+            activeProfile = 0;
+
+        audioProfile.profile(activeProfile);
+        view._record.startRecording(activeProfile);
+        wave = new Waveform.WaveForm(view.recordGrid, null);
     }
 
     _addEmptyPage() {
-        this.emptyGrid = new Gtk.Grid({ orientation: Gtk.Orientation.VERTICAL,
-            hexpand: true,
-            vexpand: true,
-            halign: Gtk.Align.CENTER,
-            valign: Gtk.Align.CENTER });
-        this._scrolledWin.add(this.emptyGrid);
-
-        let emptyPageImage = new Gtk.Image({ icon_name: 'audio-input-microphone-symbolic',
-            icon_size: Gtk.IconSize.DIALOG });
-        emptyPageImage.get_style_context().add_class('dim-label');
-        this.emptyGrid.add(emptyPageImage);
-        let emptyPageTitle = new Gtk.Label({ label: _('Add Recordings'),
-            halign: Gtk.Align.CENTER,
-            valign: Gtk.Align.CENTER });
-        emptyPageTitle.get_style_context().add_class('dim-label');
-        this.emptyGrid.add(emptyPageTitle);
-        let emptyPageDirections = new Gtk.Label({ label: _('Use the <b>Record</b> button to make sound 
recordings'),
-            use_markup: true,
-            max_width_chars: 30,
-            halign: Gtk.Align.CENTER,
-            valign: Gtk.Align.CENTER });
-        emptyPageDirections.get_style_context().add_class('dim-label');
-        this.emptyGrid.add(emptyPageDirections);
-        this.emptyGrid.show_all();
-    }
-
-    _addListviewPage(name) {
+        this._mainStack.set_visible_child(this._emptyView);
+    }
+
+    _addListviewPage() {
         list = new Listview.Listview();
         list.setListTypeNew();
         list.enumerateDirectory();
         this._record = new Record.Record(audioProfile);
-
-        groupGrid = new Gtk.Grid({ orientation: Gtk.Orientation.VERTICAL,
-            hexpand: true,
-            vexpand: true });
-        this.add_titled(groupGrid, name, 'View');
     }
 
     onPlayStopClicked() {
@@ -208,7 +167,7 @@ const MainView = GObject.registerClass(class MainView extends Gtk.Stack {
         this._record.stopRecording();
         this.recordGrid.hide();
         recordPipeline = RecordPipelineStates.STOPPED;
-        recordButton.set_sensitive(true);
+        this._recordButton.set_sensitive(true);
         if (this.listBox !== null)
             this.listBox.set_selection_mode(Gtk.SelectionMode.SINGLE);
     }
@@ -267,7 +226,6 @@ const MainView = GObject.registerClass(class MainView extends Gtk.Stack {
     }
 
     listBoxAdd() {
-        this.groupGrid = groupGrid;
         let playVolume = Application.application.getSpeakerVolume();
         let micVolume = Application.application.getMicVolume();
         volumeValue.push({ record: micVolume, play: playVolume });
@@ -275,7 +233,7 @@ const MainView = GObject.registerClass(class MainView extends Gtk.Stack {
 
         this.recordGrid = new Gtk.Grid({ name: 'recordGrid',
             orientation: Gtk.Orientation.HORIZONTAL });
-        this.groupGrid.add(this.recordGrid);
+        this._mainView.add(this.recordGrid);
 
         this.widgetRecord = new Gtk.Toolbar({ show_arrow: false,
             halign: Gtk.Align.END,
@@ -336,9 +294,8 @@ const MainView = GObject.registerClass(class MainView extends Gtk.Stack {
             }
         });
 
-        this.groupGrid.add(this._scrolledWin);
+        this._mainView.add(this._scrolledWin);
         this._scrolledWin.show();
-        header.set_title(_('Sound Recorder'));
 
         this.listBox = null;
         this._startIdx = 0;
@@ -514,7 +471,7 @@ const MainView = GObject.registerClass(class MainView extends Gtk.Stack {
     addLoadMoreButton() {
         loadMoreButton = new LoadMoreButton();
         loadMoreButton.connect('clicked', () => loadMoreButton.onLoadMore());
-        this.groupGrid.add(loadMoreButton);
+        this._mainView.add(loadMoreButton);
         loadMoreButton.show();
     }
 
@@ -746,40 +703,6 @@ const MainView = GObject.registerClass(class MainView extends Gtk.Stack {
     }
 });
 
-const RecordButton = GObject.registerClass(class RecordButton extends Gtk.Button {
-    _init() {
-        super._init();
-        this.image = Gtk.Image.new_from_icon_name('media-record-symbolic', Gtk.IconSize.BUTTON);
-        this.set_always_show_image(true);
-        this.set_valign(Gtk.Align.CENTER);
-        this.set_label(_('Record'));
-        this.get_style_context().add_class('text-button');
-        this.connect('clicked', () => this._onRecord());
-    }
-
-    _onRecord() {
-        view.destroyLoadMoreButton();
-        view.hasPreviousSelRow();
-
-        if (view.listBox)
-            view.listBox.set_selection_mode(Gtk.SelectionMode.NONE);
-        else
-            view.emptyGrid.destroy();
-
-
-        this.set_sensitive(false);
-        setVisibleID = ActiveArea.RECORD;
-        view.recordGrid.show_all();
-
-        if (activeProfile === null)
-            activeProfile = 0;
-
-        audioProfile.profile(activeProfile);
-        view._record.startRecording(activeProfile);
-        wave = new Waveform.WaveForm(view.recordGrid, null);
-    }
-});
-
 var EncoderComboBox = GObject.registerClass(class EncoderComboBox extends Gtk.ComboBoxText {
     // encoding setting labels in combobox
     _init() {


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]