Implemet a UI Selector to pop up at login one time per user

Change-Id: I40e7ca8013ea9b8fac70dc56d1d3c6b34305d8e9
josmas · Dec 5, 2024 · 381891d · 381891d
1 parent 4b8fcd2
commit 381891d
Show file tree

Hide file tree

Showing 11 changed files with 139 additions and 35 deletions.
diff --git a/appinventor/appengine/src/com/google/appinventor/client/Ode.java b/appinventor/appengine/src/com/google/appinventor/client/Ode.java
@@ -53,6 +53,7 @@
 import com.google.appinventor.client.widgets.boxes.WorkAreaPanel;
 import com.google.appinventor.client.wizards.NewProjectWizard.NewProjectCommand;
 import com.google.appinventor.client.wizards.TemplateUploadWizard;
+import com.google.appinventor.client.wizards.UISettingsWizard;
 import com.google.appinventor.common.version.AppInventorFeatures;
 import com.google.appinventor.components.common.YaVersion;
 import com.google.appinventor.shared.rpc.GetMotdService;
@@ -1419,6 +1420,12 @@ public static void setUserNewLayout(boolean newLayout) {
                     "" + newLayout);
   }
 
+  public static void setShowUIPicker(boolean value) {
+    userSettings.getSettings(SettingsConstants.USER_GENERAL_SETTINGS)
+        .changePropertyValue(SettingsConstants.SHOW_UIPICKER,
+            "" + value);
+  }
+
   public static void saveUserDesignSettings() {
     userSettings.saveSettings(new Command() {
       @Override
@@ -1782,7 +1789,11 @@ public void onClick(Widget sender) {
   }
 
   private void maybeShowSplash() {
-    if (AppInventorFeatures.showSplashScreen() && !isReadOnly) {
+    String showUIPicker = userSettings.getSettings(SettingsConstants.USER_GENERAL_SETTINGS).
+                              getPropertyValue(SettingsConstants.SHOW_UIPICKER);
+    if(showUIPicker.equalsIgnoreCase("True")) {
+      new UISettingsWizard(true).show();
+    } else if (AppInventorFeatures.showSplashScreen() && !isReadOnly) {
       createWelcomeDialog(false);
     } else {
       maybeShowNoProjectsDialog();

diff --git a/appinventor/appengine/src/com/google/appinventor/client/OdeMessages.java b/appinventor/appengine/src/com/google/appinventor/client/OdeMessages.java
@@ -5687,4 +5687,7 @@ String newerVersionComponentException(String componentType, int srcCompVersion,
   @Description("Message to display when Mark Origin is attempted before an image is set")
   String provideImageFirst();
 
+  @DefaultMessage("You can always change your user interface under the Settings menu.")
+  @Description("Dialog to introduce users to new UI. Shown once to each user.")
+  String selectUIStyle();
 }
diff --git a/appinventor/appengine/src/com/google/appinventor/client/actions/UISettingsAction.java b/appinventor/appengine/src/com/google/appinventor/client/actions/UISettingsAction.java
@@ -11,8 +11,6 @@
 public class UISettingsAction implements Command {
   @Override
   public void execute() {
-    new UISettingsWizard();
-    // The wizard will switch to the design view when the new
-    // project is created.
+    new UISettingsWizard().show();
   }
 }
diff --git a/appinventor/appengine/src/com/google/appinventor/client/settings/user/GeneralSettings.java b/appinventor/appengine/src/com/google/appinventor/client/settings/user/GeneralSettings.java
@@ -43,6 +43,8 @@ public GeneralSettings(UserInfoProvider user) {
         EditableProperty.TYPE_INVISIBLE));
     addProperty(new EditableProperty(this, SettingsConstants.FOLDERS, "",
         EditableProperty.TYPE_INVISIBLE));
+    addProperty(new EditableProperty(this, SettingsConstants.SHOW_UIPICKER,
+        "True", EditableProperty.TYPE_INVISIBLE));
   }
 
   @Override

diff --git a/appinventor/appengine/src/com/google/appinventor/client/variableColors.css b/appinventor/appengine/src/com/google/appinventor/client/variableColors.css
@@ -688,6 +688,10 @@ path.ode-SimpleMockMapFeature-selected {
   color: panel-shadow;
 }
 
+.ode-DialogBox .ExtendedText {
+  color: top-panel-color;
+}
+
 .ode-DialogBox .gwt-Tree {
   border: thin solid border-color;
 }

diff --git a/appinventor/appengine/src/com/google/appinventor/client/wizards/UISettingsWizard.java b/appinventor/appengine/src/com/google/appinventor/client/wizards/UISettingsWizard.java
@@ -7,11 +7,12 @@
 
 import com.google.appinventor.client.Ode;
 import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.InputElement;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
-import com.google.gwt.user.client.ui.RadioButton;
+import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.Button;
 
 import java.util.logging.Logger;
@@ -27,13 +28,15 @@ interface UISettingsWizardUiBinder extends UiBinder<Dialog, UISettingsWizard> {}
   @UiField protected Dialog UIDialog;
   @UiField protected Button applyButton;
   @UiField protected Button cancelButton;
+  @UiField protected Label introText;
 //  @UiField protected Button darkModeButton;
 //  @UiField protected RadioButton lightModeRadioButton;
 //  @UiField protected RadioButton darkModeRadioButton;
-  @UiField protected RadioButton classicRadioButton;
-  @UiField protected RadioButton modernRadioButton;
+  @UiField protected InputElement classicRadioButton;
+  @UiField protected InputElement modernRadioButton;
   Boolean userThemePreference;
   Boolean userLayoutPreference;
+  Boolean firstUIChoice = false;
 
   /**
    * Creates a new YoungAndroid project wizard.
@@ -43,16 +46,22 @@ public UISettingsWizard() {
     userThemePreference = Ode.getUserDarkThemeEnabled();
     userLayoutPreference = Ode.getUserNewLayout();
     if (userLayoutPreference) {
-      modernRadioButton.setValue(true);
+      modernRadioButton.setChecked(true);
     } else {
-      classicRadioButton.setValue(true);
-    }   
+      classicRadioButton.setChecked(true);
+    }
 //    if (userThemePreference){
 //      darkModeRadioButton.setValue(true);
 //    }else{
 //      lightModeRadioButton.setValue(true);
 //    }
-    show();
+  }
+
+  public UISettingsWizard(boolean intro) {
+    this();
+    introText.setVisible(intro);
+    cancelButton.setVisible(!intro);
+    firstUIChoice = intro;
   }
 
   public void bindUI() {
@@ -103,15 +112,10 @@ protected void applySettings(ClickEvent e) {
 //          Ode.setUserDarkThemeEnabled(true);
 //      }
 //    }
-    if (classicRadioButton.getValue()) {
-      if (Ode.getUserNewLayout()) {
-        Ode.setUserNewLayout(false);
-      }
-    } else {
-      if (!Ode.getUserNewLayout()) {
-        Ode.setUserNewLayout(true);
-      }
+    if (firstUIChoice) {
+      Ode.setShowUIPicker(false);
     }
+    Ode.setUserNewLayout(modernRadioButton.isChecked());
     Ode.saveUserDesignSettings();
     UIDialog.hide();
   }

diff --git a/appinventor/appengine/src/com/google/appinventor/client/wizards/UISettingsWizard.ui.xml b/appinventor/appengine/src/com/google/appinventor/client/wizards/UISettingsWizard.ui.xml
@@ -9,28 +9,34 @@
              ui:generateLocales="default">
   <ui:with field="messages" type="com.google.appinventor.client.OdeMessages"/>
   <wiz:Dialog ui:field="UIDialog" caption="{messages.uiSettings}"
-              styleName="ode-DialogBox" width="340px" height="40px">
+              styleName="ode-DialogBox ode-UserSettingsDialog">
     <g:FlowPanel>
       <g:FlowPanel styleName="ode-DialogRow">
         <g:Label text="{messages.selectStyle}" />
       </g:FlowPanel>
       <g:FlowPanel styleName="ode-DialogRow">
-        <g:HTML>
-          <img srcset="" class="contentImage" src="/static/images/ai2-classic-style.png" width="360px" />
-        </g:HTML>
-      </g:FlowPanel>
-      <g:FlowPanel styleName="ode-DialogRow">
-        <g:RadioButton ui:field='classicRadioButton' name='UI' text='{messages.disableNewLayout}'/>
-      </g:FlowPanel>
-      <g:FlowPanel styleName="ode-DialogRow"> </g:FlowPanel>
-      <g:FlowPanel styleName="ode-DialogRow">
-        <g:HTML>
-          <img srcset="" class="contentImage" src="/static/images/ai2-neo-style.png" width="360px" />
-        </g:HTML>
-      </g:FlowPanel>
-      <g:FlowPanel styleName="ode-DialogRow" >
-        <g:RadioButton ui:field='modernRadioButton' name='UI' text='{messages.enableNewLayout}' />
+        <g:Label ui:field="introText" text='{messages.selectUIStyle}' styleName="ExtendedText" visible="false" />
       </g:FlowPanel>
+      <g:HTMLPanel styleName="image-radio-group">
+        <div class="image-radio">
+          <label class="image-label">
+            <input type="radio" class="hidden-radio" name="UI" value="classic"
+                   ui:field="classicRadioButton" />
+            <img src="/static/images/ai2-classic-style.png" />
+            <br/>
+            <g:Label text="{messages.disableNewLayout}" />
+          </label>
+        </div>
+        <div class="image-radio">
+          <label class="image-label">
+            <input type="radio" class="hidden-radio" name="UI" value="modern"
+                   ui:field="modernRadioButton" />
+            <img src="/static/images/ai2-neo-style.png" />
+            <br/>
+            <g:Label text="{messages.enableNewLayout}" />
+          </label>
+        </div>
+      </g:HTMLPanel>
       <!--
       <g:FlowPanel styleName="ode-DialogRow">
         <g:Label text="{messages.selectMode}" width="30%" />

diff --git a/appinventor/appengine/src/com/google/appinventor/shared/settings/SettingsConstants.java b/appinventor/appengine/src/com/google/appinventor/shared/settings/SettingsConstants.java
@@ -32,6 +32,7 @@ private SettingsConstants() {
   public static final String USER_NEW_LAYOUT = "NewLayout";
   public static final String DARK_THEME_ENABLED = "DarkThemeEnabled";
   public static final String FOLDERS = "Folders";
+  public static final String SHOW_UIPICKER = "ShowUIPicker";
 
   public static final String SPLASH_SETTINGS = "SplashSettings";
 

diff --git a/appinventor/appengine/war/static/css/Ya.css b/appinventor/appengine/war/static/css/Ya.css
@@ -1912,6 +1912,15 @@ path.ode-SimpleMockMapFeature-selected {
    text-shadow: none;
  }
 
+ .ode-DialogBox .ExtendedText {
+   padding-left: 10px;
+   font-weight: normal;
+   font-size: 14px;
+   color: #555;
+   padding-bottom: 20px;
+   padding-top: 10px;
+ }
+
 .ode-DialogRow .gwt-RadioButton input[type="radio"] {
   margin-right: 5px;
 }
@@ -3313,3 +3322,69 @@ div.dropdiv p {
   margin-left: 1px;
   font-size: 11px;
 }
+
+.ode-UserSettingsDialog .dialogContent {
+  width: 768px;
+}
+
+.image-radio-group {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.image-radio {
+  position: relative;
+  text-align: center;
+}
+
+.hidden-radio {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.image-label {
+  display: flex;
+  cursor: pointer;
+  flex-direction: column;
+  height: 100%;
+}
+
+.image-label img {
+  box-sizing: border-box;
+  width: 360px;
+  object-fit: cover;
+  border: 3px solid transparent;
+  border-radius: 5px;
+  transition: border-color 0.2s ease-in-out;
+}
+
+.hidden-radio:checked + img {
+  border-color: #7D9D36;
+}
+
+.image-label:hover img {
+  border-color: #b3c833;
+}
+
+.hidden-radio:focus + img {
+  box-shadow: 0 0 0 2px rgba(186, 238, 86, 0.6);
+}
+
+.image-label > .gwt-Label {
+  flex-grow: 1;
+  align-content: flex-end;
+}
+
+@media(max-width: 768px) {
+  .ode-UserSettingsDialog .dialogContent {
+    width: 100%;
+    max-width: 360px;
+    flex-direction: column;
+  }
+  .image-radio-group {
+    flex-direction: column;
+  }
+}
diff --git a/appinventor/appengine/war/static/images/ai2-classic-style.png b/appinventor/appengine/war/static/images/ai2-classic-style.png
diff --git a/appinventor/appengine/war/static/images/ai2-neo-style.png b/appinventor/appengine/war/static/images/ai2-neo-style.png