[voxygen] Disable editing server address if it is supplied via CLI and hide server list button (with an unlock button to re-enable editing)

voxygen/src/menu/main/ui/login.rs

@@ -6,7 +6,7 @@ use crate::ui::{
         style,
         widget::{
             compound_graphic::{CompoundGraphic, Graphic},
-            BackgroundContainer, Image, Padding,
+            AspectRatioContainer, BackgroundContainer, Image, Padding,
         },
         Element,
     },
@@ -55,6 +55,7 @@ impl Screen {
         &mut self,
         fonts: &Fonts,
         imgs: &Imgs,
+        server_field_locked: bool,
         login_info: &LoginInfo,
         error: Option<&str>,
         i18n: &Localization,
@@ -64,14 +65,19 @@ impl Screen {
         button_style: style::button::Style,
         version: &str,
     ) -> Element<Message> {
-        let buttons = Column::with_children(vec![
+        let mut buttons = Vec::new();
-            neat_button(
+        // If the server field is locked, we don't want to show the server selection
+        // list!
+        if !server_field_locked {
+            buttons.push(neat_button(
                 &mut self.servers_button,
                 i18n.get_msg("common-servers"),
                 FILL_FRAC_ONE,
                 button_style,
                 Some(Message::ShowServers),
-            ),
+            ))
+        }
+        buttons.extend([
             // neat_button(
             //     &mut self.settings_button,
             //     i18n.get_msg("common-settings"),
@@ -100,12 +106,14 @@ impl Screen {
                 button_style,
                 Some(Message::Quit),
             ),
-        ])
+        ]);
+
+        let buttons = Container::new(
+            Column::with_children(buttons)
                 .width(Length::Fill)
                 .max_width(100)
-        .spacing(5);
+                .spacing(5),
-
+        )
-        let buttons = Container::new(buttons)
         .width(Length::Fill)
         .height(Length::Fill)
         .align_y(Align::End);
@@ -173,8 +181,14 @@ impl Screen {
                 button_style,
             )
         } else {
-            self.banner
+            self.banner.view(
-                .view(fonts, imgs, login_info, i18n, button_style)
+                fonts,
+                imgs,
+                server_field_locked,
+                login_info,
+                i18n,
+                button_style,
+            )
         };
 
         let central_column = Container::new(central_content)
@@ -330,6 +344,8 @@ pub struct LoginBanner {
     multiplayer_button: button::State,
     #[cfg(feature = "singleplayer")]
     singleplayer_button: button::State,
+
+    unlock_server_field_button: button::State,
 }
 
 impl LoginBanner {
@@ -342,6 +358,8 @@ impl LoginBanner {
             multiplayer_button: Default::default(),
             #[cfg(feature = "singleplayer")]
             singleplayer_button: Default::default(),
+
+            unlock_server_field_button: Default::default(),
         }
     }
 
@@ -349,12 +367,56 @@ impl LoginBanner {
         &mut self,
         fonts: &Fonts,
         imgs: &Imgs,
+        server_field_locked: bool,
         login_info: &LoginInfo,
         i18n: &Localization,
         button_style: style::button::Style,
     ) -> Element<Message> {
         let input_text_size = fonts.cyri.scale(INPUT_TEXT_SIZE);
 
+        let server_field: Element<Message> = if server_field_locked {
+            let unlock_style = style::button::Style::new(imgs.unlock)
+                .hover_image(imgs.unlock_hover)
+                .press_image(imgs.unlock_press);
+
+            let unlock_button = Button::new(
+                &mut self.unlock_server_field_button,
+                Space::new(Length::Fill, Length::Fill),
+            )
+            .style(unlock_style)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .on_press(Message::UnlockServerField);
+
+            let container = AspectRatioContainer::new(unlock_button);
+            let container = match unlock_style.active().0 {
+                Some((img, _)) => container.ratio_of_image(img),
+                None => container,
+            };
+
+            Row::with_children(vec![
+                Text::new(&login_info.server)
+                    .size(input_text_size)
+                    .width(Length::Fill)
+                    .height(Length::Shrink)
+                    .into(),
+                container.into(),
+            ])
+            .align_items(Align::Center)
+            .height(Length::Fill)
+            .into()
+        } else {
+            TextInput::new(
+                &mut self.server,
+                &i18n.get_msg("main-server"),
+                &login_info.server,
+                Message::Server,
+            )
+            .size(input_text_size)
+            .on_submit(Message::Multiplayer)
+            .into()
+        };
+
         let banner_content = Column::with_children(vec![
             Column::with_children(vec![
                 BackgroundContainer::new(
@@ -392,16 +454,9 @@ impl LoginBanner {
                     Image::new(imgs.input_bg)
                         .width(Length::Units(INPUT_WIDTH))
                         .fix_aspect_ratio(),
-                    TextInput::new(
+                    server_field,
-                        &mut self.server,
-                        &i18n.get_msg("main-server"),
-                        &login_info.server,
-                        Message::Server,
                 )
-                    .size(input_text_size)
+                .padding(Padding::new().horizontal(7).vertical(5))
-                    .on_submit(Message::Multiplayer),
-                )
-                .padding(Padding::new().horizontal(7).top(5))
                 .into(),
             ])
             .spacing(5)

voxygen/src/menu/main/ui/mod.rs

@@ -53,6 +53,9 @@ image_ids_ice! {
         selection: "voxygen.element.ui.generic.frames.selection",
         selection_hover: "voxygen.element.ui.generic.frames.selection_hover",
         selection_press: "voxygen.element.ui.generic.frames.selection_press",
+        unlock: "voxygen.element.ui.generic.buttons.unlock",
+        unlock_hover: "voxygen.element.ui.generic.buttons.unlock_hover",
+        unlock_press: "voxygen.element.ui.generic.buttons.unlock_press",
     }
 }
 
@@ -137,6 +140,10 @@ struct Controls {
     alpha: String,
     credits: Credits,
 
+    // If a server address was provided via cli argument we hide the server list button and replace
+    // the server field with a plain label (with a button to exit this mode and freely edit the
+    // field).
+    server_field_locked: bool,
     selected_server_index: Option<usize>,
     login_info: LoginInfo,
 
@@ -157,6 +164,7 @@ enum Message {
     #[cfg(feature = "singleplayer")]
     Singleplayer,
     Multiplayer,
+    UnlockServerField,
     LanguageChanged(usize),
     OpenLanguageMenu,
     Username(String),
@@ -199,6 +207,7 @@ impl Controls {
             };
         //};
 
+        let server_field_locked = server.is_some();
         let login_info = LoginInfo {
             username: settings.networking.username.clone(),
             password: String::new(),
@@ -224,6 +233,7 @@ impl Controls {
             alpha,
             credits,
 
+            server_field_locked,
             selected_server_index,
             login_info,
 
@@ -292,6 +302,7 @@ impl Controls {
             Screen::Login { screen, error } => screen.view(
                 &self.fonts,
                 &self.imgs,
+                self.server_field_locked,
                 &self.login_info,
                 error.as_deref(),
                 &self.i18n.read(),
@@ -387,6 +398,7 @@ impl Controls {
                     server_address: self.login_info.server.clone(),
                 });
             },
+            Message::UnlockServerField => self.server_field_locked = false,
             Message::Username(new_value) => self.login_info.username = new_value,
             Message::LanguageChanged(new_value) => {
                 events.push(Event::ChangeLanguage(language_metadatas.remove(new_value)));
@@ -496,7 +508,12 @@ impl Controls {
                 screen.banner.password.move_cursor_to_end();
             } else if screen.banner.password.is_focused() {
                 screen.banner.password = text_input::State::new();
+                // Skip focusing server field if it isn't editable!
+                if self.server_field_locked {
+                    screen.banner.username = text_input::State::focused();
+                } else {
                     screen.banner.server = text_input::State::focused();
+                }
                 screen.banner.server.move_cursor_to_end();
             } else if screen.banner.server.is_focused() {
                 screen.banner.server = text_input::State::new();