FloatingActionButton - Use generic theme / built-in icons (DevExpress#8033) (DevExpress#8037)

Author: mpreyskurantov

applications/GettingStartedWith/FloatingActionButton/HandleScreenTransitions/index.html

@@ -3,5 +3,5 @@
     <div id="action-edit"></div>
     <div id="action-mail"></div>
     <div id="action-copy"></div>
-    <div id="action-facebook"></div>
+    <div id="action-social"></div>
 </div>

applications/GettingStartedWith/FloatingActionButton/HandleScreenTransitions/index.js

@@ -1,15 +1,7 @@
-$("<link>", {
-    rel: "stylesheet",
-    href: "https://unpkg.com/[email protected]/dist/css/ionicons.min.css"
- }).appendTo("head");
-
 $(function() {
-    const isDarkTheme = document.cookie.includes("theme=dark");
-    DevExpress.ui.themes.current(isDarkTheme ? "material.blue.dark" : "material.blue.light")
-
     DevExpress.config({
         floatingActionButtonConfig: {
-            icon: "icon ion-md-share",
+            icon: "share",
             position: {
                 my: "right bottom",
                 at: "right bottom",
@@ -21,15 +13,15 @@ $(function() {
 
     var editAction = $("#action-edit").dxSpeedDialAction({
         hint: "Edit",
-        icon: "icon ion-md-create",
+        icon: "edit",
         onClick: function() {
             showNotification("Edit is clicked")
         }
     }).dxSpeedDialAction("instance");
 
     var copyAction = $("#action-copy").dxSpeedDialAction({
         hint: "Copy to clipboard",
-        icon: "icon ion-md-copy",
+        icon: "copy",
         visible: false,
         onClick: function() {
             showNotification("Copied to clipboard")
@@ -38,19 +30,19 @@ $(function() {
 
     var mailAction = $("#action-mail").dxSpeedDialAction({
         hint: "Send by email",
-        icon: "icon ion-md-mail",
+        icon: "email",
         visible: false,
         onClick: function() {
             showNotification("Sent by email")
         }
     }).dxSpeedDialAction("instance");
 
-    var facebookAction = $("#action-facebook").dxSpeedDialAction({
-        hint: "Share on Facebook",
-        icon: "icon ion-logo-facebook",
+    var facebookAction = $("#action-social").dxSpeedDialAction({
+        hint: "Share on Social Media",
+        icon: "link",
         visible: false,
         onClick: function() {
-            showNotification("Shared on Facebook")
+            showNotification("Shared on Social Media")
         }
     }).dxSpeedDialAction("instance");
 

applications/GettingStartedWith/FloatingActionButton/MultipleActions/index.html

@@ -2,5 +2,5 @@
     <p>View's content</p>
     <div id="action-mail"></div>
     <div id="action-copy"></div>
-    <div id="action-facebook"></div>
+    <div id="action-social"></div>
 </div>

applications/GettingStartedWith/FloatingActionButton/MultipleActions/index.js

@@ -1,15 +1,7 @@
-$("<link>", {
-    rel: "stylesheet",
-    href: "https://unpkg.com/[email protected]/dist/css/ionicons.min.css"
- }).appendTo("head");
-
 $(function() {
-    const isDarkTheme = document.cookie.includes("theme=dark");
-    DevExpress.ui.themes.current(isDarkTheme ? "material.blue.dark" : "material.blue.light")
-
     DevExpress.config({
         floatingActionButtonConfig: {
-            icon: "icon ion-md-share",
+            icon: "share",
             position: {
                 my: "right bottom",
                 at: "right bottom",
@@ -21,25 +13,25 @@ $(function() {
 
     $("#action-copy").dxSpeedDialAction({
         hint: "Copy to clipboard",
-        icon: "icon ion-md-copy",
+        icon: "copy",
         onClick: function() {
             showNotification("Copied to clipboard");
         }
     });
 
     $("#action-mail").dxSpeedDialAction({
         hint: "Send by email",
-        icon: "icon ion-md-mail",
+        icon: "email",
         onClick: function() {
             showNotification("Sent by email");
         }
     });
 
-    $("#action-facebook").dxSpeedDialAction({
-        hint: "Share on Facebook",
-        icon: "icon ion-logo-facebook",
+    $("#action-social").dxSpeedDialAction({
+        hint: "Share on Social Media",
+        icon: "link",
         onClick: function() {
-            showNotification("Shared on Facebook");
+            showNotification("Shared on Social Media");
         }
     });
 

applications/GettingStartedWith/FloatingActionButton/SingleAction/index.js

@@ -1,12 +1,4 @@
-$("<link>", {
-    rel: "stylesheet",
-    href: "https://unpkg.com/[email protected]/dist/css/ionicons.min.css"
- }).appendTo("head");
-
 $(function() {
-    const isDarkTheme = document.cookie.includes("theme=dark");
-    DevExpress.ui.themes.current(isDarkTheme ? "material.blue.dark" : "material.blue.light")
-
     DevExpress.config({
         floatingActionButtonConfig: {
             position: {
@@ -20,7 +12,7 @@ $(function() {
 
     $("#action-edit").dxSpeedDialAction({
         hint: "Edit",
-        icon: "icon ion-md-create",
+        icon: "edit",
         onClick: function() {
             showNotification("Edit is clicked")
         }