Add a first run introduction dialog & WIP guide form

Configuration/UserConfig.cs

@@ -44,6 +44,8 @@ static UserConfig(){
         
         // CONFIGURATION DATA
 
+        public bool FirstRun { get; set; } = true;
+
         public WindowState BrowserWindow { get; set; } = new WindowState();
         public WindowState PluginsWindow { get; set; } = new WindowState();
 

Core/Bridge/TweetDeckBridge.cs

@@ -46,6 +46,12 @@ public TweetDeckBridge(FormBrowser form, FormNotificationMain notification){
             this.notification = notification;
         }
 
+        public void OnIntroductionClosed(bool showGuide){
+            form.InvokeAsyncSafe(() => {
+                form.OnIntroductionClosed(showGuide);
+            });
+        }
+
         public void LoadFontSizeClass(string fsClass){
             form.InvokeAsyncSafe(() => {
                TweetNotification.SetFontSizeClass(fsClass);

Core/FormBrowser.cs

@@ -208,6 +208,10 @@ private void browser_FrameLoadEnd(object sender, FrameLoadEndEventArgs e){
                 if (Program.SystemConfig.EnableBrowserGCReload){
                     memoryUsageTracker.Start(this, e.Browser, Program.SystemConfig.BrowserMemoryThreshold);
                 }
+
+                if (Config.FirstRun){
+                    ScriptLoader.ExecuteFile(e.Frame, "introduction.js");
+                }
             }
         }
 
@@ -436,6 +440,15 @@ public void ReloadToTweetDeck(){
         }
 
         // callback handlers
+        
+        public void OnIntroductionClosed(bool showGuide){
+            Config.FirstRun = false;
+            Config.Save();
+
+            if (showGuide){
+                ShowChildForm(new FormGuide());
+            }
+        }
 
         public void OpenContextMenu(){
             contextMenu.Show(this, PointToClient(Cursor.Position));

Core/FormManager.cs

@@ -20,7 +20,7 @@ public static bool TryBringToFront<T>() where T : Form{
 
         public static void CloseAllDialogs(){
             foreach(Form form in Application.OpenForms.Cast<Form>().Reverse()){
-                if (form is FormSettings || form is FormPlugins || form is FormAbout){
+                if (form is FormSettings || form is FormPlugins || form is FormAbout || form is FormGuide){
                     form.Close();
                 }
             }

Core/Other/FormAbout.Designer.cs

@@ -131,11 +131,14 @@ private void InitializeComponent() {
             this.Controls.Add(this.labelDescription);
             this.Controls.Add(this.pictureLogo);
             this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.FixedDialog;
+            this.HelpButton = true;
             this.MaximizeBox = false;
             this.MinimizeBox = false;
             this.Name = "FormAbout";
             this.ShowIcon = false;
             this.StartPosition = System.Windows.Forms.FormStartPosition.CenterParent;
+            this.HelpButtonClicked += new System.ComponentModel.CancelEventHandler(this.FormAbout_HelpButtonClicked);
+            this.HelpRequested += new System.Windows.Forms.HelpEventHandler(this.FormAbout_HelpRequested);
             ((System.ComponentModel.ISupportInitialize)(this.pictureLogo)).EndInit();
             this.tablePanelLinks.ResumeLayout(false);
             this.tablePanelLinks.PerformLayout();

Core/Other/FormAbout.cs

@@ -1,4 +1,6 @@
-using System.Windows.Forms;
+using System.ComponentModel;
+using System.Windows.Forms;
+using TweetDuck.Core.Controls;
 using TweetDuck.Core.Utils;
 
 namespace TweetDuck.Core.Other{
@@ -21,5 +23,25 @@ public FormAbout(){
         private void OnLinkClicked(object sender, LinkLabelLinkClickedEventArgs e){
             BrowserUtils.OpenExternalBrowserUnsafe(e.Link.LinkData as string);
         }
+
+        private void FormAbout_HelpRequested(object sender, HelpEventArgs hlpevent){
+            ShowGuide();
+        }
+
+        private void FormAbout_HelpButtonClicked(object sender, CancelEventArgs e){
+            e.Cancel = true;
+            ShowGuide();
+        }
+
+        private void ShowGuide(){
+            FormGuide form = new FormGuide();
+
+            form.VisibleChanged += (sender, args) => {
+                form.MoveToCenter(this);
+                Close();
+            };
+
+            form.Show();
+        }
     }
 }

Core/Other/FormGuide.Designer.cs

@@ -0,0 +1,33 @@
+namespace TweetDuck.Core.Other {
+    partial class FormGuide {
+        /// <summary>
+        /// Required designer variable.
+        /// </summary>
+        private System.ComponentModel.IContainer components = null;
+
+        /// <summary>
+        /// Clean up any resources being used.
+        /// </summary>
+        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
+        protected override void Dispose(bool disposing) {
+            if (disposing && (components != null)) {
+                components.Dispose();
+            }
+            base.Dispose(disposing);
+        }
+
+        #region Windows Form Designer generated code
+
+        /// <summary>
+        /// Required method for Designer support - do not modify
+        /// the contents of this method with the code editor.
+        /// </summary>
+        private void InitializeComponent() {
+            this.components = new System.ComponentModel.Container();
+            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
+            this.Icon = global::TweetDuck.Properties.Resources.icon;
+        }
+
+        #endregion
+    }
+}

Core/Other/FormGuide.cs

@@ -0,0 +1,11 @@
+using System.Windows.Forms;
+
+namespace TweetDuck.Core.Other{
+    public partial class FormGuide : Form{
+        public FormGuide(){
+            InitializeComponent();
+
+            // TODO create guide
+        }
+    }
+}

Resources/Scripts/introduction.js

@@ -0,0 +1,68 @@
+(function($, $TD){
+  $(document).one("TD.ready", function(){
+    let css = $(`
+<style>
+#td-introduction-modal {
+  display: block;
+}
+
+#td-introduction-modal .mdl {
+  height: 315px;
+}
+
+#td-introduction-modal .mdl-header-title {
+  cursor: default;
+}
+
+#td-introduction-modal .mdl-content {
+  padding: 4px 0;
+}
+
+#td-introduction-modal p {
+  padding: 12px 16px 0;
+  font-size: 1.4rem;
+}
+
+#td-introduction-modal p strong {
+  font-weight: normal;
+  text-shadow: 0 0 #000;
+}
+
+#td-introduction-modal footer {
+  padding: 10px 0;
+}
+
+#td-introduction-modal button {
+  margin-left: 8px;
+}
+</style>`).appendTo(document.head);
+    
+    let ele = $(`
+<div id="td-introduction-modal" class="ovl">
+  <div class="mdl is-inverted-dark">
+    <header class="mdl-header">
+      <h3 class="mdl-header-title">Welcome to TweetDuck</h3>
+      <a href="#" class="mdl-dismiss link-normal-dark"><i class="icon icon-close"></i></a>
+    </header>
+    <div class="mdl-inner">
+      <div class="mdl-content">
+        <p>Thanks for downloading TweetDuck!</p>
+        <p>Right-click anywhere or click <strong>Settings &ndash; TweetDuck</strong> to access the main menu.</p>
+        <p>If you are using TweetDuck for the first time, check out the <strong>guide</strong> that showcases many great features TweetDuck offers and answers some common questions.</p>
+        <p>You can also access the guide later by opening the main menu, selecting <strong>About TweetDuck</strong>, and clicking the help button.</p>
+      </div>
+      <footer class="txt-right">
+        <button class="btn btn-positive" data-guide><span class="label">Show Guide</span></button>
+        <button class="btn btn-positive"><span class="label">Close</span</button>
+      </footer>
+    </div>
+  </div>
+</div>`).appendTo(".js-app");
+    
+    ele.find("button, a").click(function(){
+      $TD.onIntroductionClosed($(this)[0].hasAttribute("data-guide"));
+      ele.remove();
+      css.remove();
+    });
+  });
+})($, $TD);

TweetDuck.csproj

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <Import Project="packages\CefSharp.WinForms.57.0.0\build\CefSharp.WinForms.props" Condition="Exists('packages\CefSharp.WinForms.57.0.0\build\CefSharp.WinForms.props')" />
   <Import Project="packages\CefSharp.Common.57.0.0\build\CefSharp.Common.props" Condition="Exists('packages\CefSharp.Common.57.0.0\build\CefSharp.Common.props')" />
@@ -131,6 +131,12 @@
     <Compile Include="Core\Other\FormAbout.Designer.cs">
       <DependentUpon>FormAbout.cs</DependentUpon>
     </Compile>
+    <Compile Include="Core\Other\FormGuide.cs">
+      <SubType>Form</SubType>
+    </Compile>
+    <Compile Include="Core\Other\FormGuide.Designer.cs">
+      <DependentUpon>FormGuide.cs</DependentUpon>
+    </Compile>
     <Compile Include="Core\Other\FormMessage.cs">
       <SubType>Form</SubType>
     </Compile>
@@ -325,6 +331,7 @@
   </ItemGroup>
   <ItemGroup>
     <Content Include="Resources\Scripts\code.js" />
+    <Content Include="Resources\Scripts\introduction.js" />
     <Content Include="Resources\Scripts\notification.js" />
     <Content Include="Resources\Scripts\pages\error.html" />
     <Content Include="Resources\Scripts\pages\example.html" />