Issue-2: Add arrow after plugin activation

admin/class-wordpress-diffy-admin.php

@@ -17,9 +17,49 @@ public function __construct($plugin_name, $version) {
     add_action('admin_menu', array($this, 'addPluginAdminMenu'), 9);
     add_action('admin_init', array($this, 'registerAndBuildFields'));
 
+    // Init function on plugin activation
+    add_action( 'init', array( $this, 'load_plugin' ) );
+
     // Add javascript to the form.
-    add_action('admin_enqueue_scripts', array($this, 'scripts'));
+    add_action( 'admin_enqueue_scripts', array( $this, 'scripts' ) );
     add_action( 'wp_ajax_diffy_register', array( $this, 'diffy_register' ) );
+
+    // Add styles to the admin page.
+    add_action( 'admin_enqueue_scripts', array( $this, 'styles' ) );
+  }
+
+  /**
+   * Activate the plugin
+   */
+  public function activate() {
+    add_option( 'activated_plugin', 'wordpress-diffy' ); //ToDo
+  }
+
+  /**
+   * Enqueue styles and scripts after plugin activation
+   */
+  public function load_plugin() {
+    if ( is_admin() && get_option( 'activated_plugin' ) == 'wordpress-diffy' ) {
+
+        delete_option( 'activated_plugin' );
+
+        wp_enqueue_script(
+          'diffy-custom',
+          plugin_dir_url(__FILE__) . '../js/custom.js',
+          array('jquery'),
+          NULL,
+          TRUE
+        );
+
+        // set variables for script
+        wp_localize_script(
+          'diffy-custom',
+          'params',
+          array(
+            'pluginPath' => plugin_dir_url(__DIR__),
+          )
+        );
+    }
   }
 
   /**
@@ -47,6 +87,18 @@ public function scripts($hook) {
     );
   }
 
+  /**
+   * Add styles to the plugin.
+   */
+  public function styles() {
+    wp_enqueue_style(
+      'diffy-stylesheet',
+      plugin_dir_url(__FILE__) . '../css/style.css',
+      array(),
+      NULL
+    );
+  }
+
   /**
    * Register an account with Diffy.
    */
@@ -291,4 +343,4 @@ public function diffy_validate_project_id_callback($project_id) {
     return $project_id;
   }
 
-}
+}

css/style.css

@@ -0,0 +1,13 @@
+.wordpress-diffy-arrow {
+    transform: rotate(180deg);
+    width: 100px;
+    position: absolute;
+    left: 120px;
+    top: -50px;
+    opacity: 0;
+    transition: .5s opacity ease-in-out;
+}
+
+.wordpress-diffy-arrow-active {
+    opacity: 1;
+}

js/custom.js

@@ -0,0 +1,12 @@
+( function( $ ) {
+    var pluginPath = params.pluginPath;
+
+    $( document ).ready( function() { 
+        $('.menu-top .toplevel_page_wordpress-diffy')
+        .append(`<img class="wordpress-diffy-arrow" src="${pluginPath}img/arrow.svg">`)
+        .ready( function() {
+            $('.wordpress-diffy-arrow').addClass("wordpress-diffy-arrow-active");
+        } )
+    });
+
+})( jQuery );

wordpress-diffy.php

@@ -35,7 +35,14 @@
 
 // Load admin pages.
 require_once dirname( __FILE__ ) . '/admin/class-wordpress-diffy-admin.php';
-$admin = new Diffy_Admin('wordpress-diffy', '0.9.0');
+
+if ( class_exists( 'Diffy_Admin' ) ) {
+  // Installation hook
+  register_activation_hook( __FILE__, array( 'Diffy_Admin', 'activate' ) );
+
+  // instantiate the plugin class    
+  $admin = new Diffy_Admin( 'wordpress-diffy', '0.9.0' );
+}
 
 /**
  * Throw an error if the Composer autoload is missing and self-deactivate plugin.