UI: Add Zulip version in gear menu.

Currently only enabled in development, since the exact details don't seem right.. Co-Author-By: Signior-X <b19188@students.iitmandi.ac.in> Co-Author-By: Aman Agrawal <amanagr@zulip.com> Implements UI for #8005.
2021-02-09 15:46:52 +05:30 · 2021-02-09 15:46:52 +05:30 · a74b52db22
parent daabc52a78
commit a74b52db22
14 changed files with 162 additions and 0 deletions
--- a/static/images/logo/white-zulip-logo-without-text.svg
+++ b/static/images/logo/white-zulip-logo-without-text.svg
--- a/static/js/about_zulip.js
+++ b/static/js/about_zulip.js
@ -0,0 +1,17 @@
+import ClipboardJS from "clipboard";
+import $ from "jquery";
+
+import * as browser_history from "./browser_history";
+import * as overlays from "./overlays";
+
+export function launch() {
+    overlays.open_overlay({
+        name: "about-zulip",
+        overlay: $("#about-zulip"),
+        on_close() {
+            browser_history.exit_overlay();
+        },
+    });
+
+    new ClipboardJS("#about-zulip .fa-copy");
+}
--- a/static/js/gear_menu.js
+++ b/static/js/gear_menu.js
@ -26,6 +26,7 @@ link:  Help center
 info:  Keyboard shortcuts
 info:  Message formatting
 info:  Search operators
+hash:  About Zulip
 ---
 link:  Desktop & mobile apps
 link:  Integrations
@ -53,6 +54,7 @@ links:
    #streams
    #settings
    #organization
+    #about-zulip
    #invite

 When you click on the links there is a function
--- a/static/js/hash_util.js
+++ b/static/js/hash_util.js
@ -227,6 +227,7 @@ export function is_overlay_hash(hash) {
        "keyboard-shortcuts",
        "message-formatting",
        "search-operators",
+        "about-zulip",
    ];
    const main_hash = get_hash_category(hash);

--- a/static/js/hashchange.js
+++ b/static/js/hashchange.js
@ -1,5 +1,6 @@
 import $ from "jquery";

+import * as about_zulip from "./about_zulip";
 import * as admin from "./admin";
 import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
@ -154,6 +155,7 @@ function do_hashchange_normal(from_reload) {
        case "#streams":
        case "#organization":
        case "#settings":
+        case "#about-zulip":
            blueslip.error("overlay logic skipped for: " + hash);
            break;
    }
@ -277,6 +279,10 @@ function do_hashchange_overlay(old_hash) {
        info_overlay.show("search-operators");
        return;
    }
+
+    if (base === "about-zulip") {
+        about_zulip.launch();
+    }
 }

 function hashchanged(from_reload, e) {
--- a/static/styles/app_components.css
+++ b/static/styles/app_components.css
@ -517,3 +517,9 @@ div.overlay {
        font-weight: 600;
    }
 }
+
+.white_zulip_icon_without_text {
+    display: inline-block;
+    background-image: url(../../static/images/logo/white-zulip-logo-without-text.svg);
+    background-size: cover;
+}
--- a/static/styles/night_mode.css
+++ b/static/styles/night_mode.css
@ -318,6 +318,19 @@ on a dark background, and don't change the dark labels dark either. */
        opacity: 0.2;
    }

+    #about-zulip {
+        .about-zulip-version {
+            color: hsl(212, 17%, 81%);
+        }
+    }
+
+    #gear_menu_about_zulip {
+        .white_zulip_icon_without_text {
+            filter: invert(10%) sepia(16%) saturate(175%) hue-rotate(194deg)
+                brightness(99%) contrast(89%);
+        }
+    }
+
    .nav .dropdown-menu::after,
    .popover.bottom .arrow {
        border-bottom-color: hsl(235, 18%, 7%);
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@ -699,6 +699,28 @@ li.actual-dropdown-menu i {
    margin-right: 3px;
 }

+#gear_menu_about_zulip {
+    .white_zulip_icon_without_text {
+        position: relative;
+        top: 3px;
+        width: 14px;
+        height: 14px;
+        margin-right: 3px;
+        filter: invert(20%) sepia(11%) saturate(0%) hue-rotate(272deg)
+            brightness(20%) contrast(95%);
+    }
+    .about_zulip_text {
+        position: relative;
+        top: 1.4px;
+    }
+
+    :hover {
+        .white_zulip_icon_without_text {
+            filter: none;
+        }
+    }
+}
+
 .settings-dropdown-cog {
    padding: 6px 12px;
 }
@ -2666,6 +2688,57 @@ select.inline_select_topic_edit {
    display: none;
 }

+#about-zulip {
+    .exit {
+        font-size: 1.5rem;
+        font-weight: 600;
+        background-color: transparent;
+        border: none;
+        position: absolute;
+        right: 8px;
+        z-index: 1;
+        color: hsl(0, 0%, 67%);
+    }
+
+    .overlay-content {
+        position: relative;
+        width: 300px;
+        border-radius: 4px;
+    }
+
+    .modal-body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .about-zulip-logo {
+        padding-top: 20px;
+        height: 70px;
+    }
+
+    .about-zulip-title {
+        font-weight: 600;
+        padding: 10px;
+    }
+
+    .about-zulip-version {
+        color: hsl(222, 8%, 28%);
+
+        .fa-copy {
+            padding-left: 3px;
+        }
+
+        :hover {
+            cursor: pointer;
+
+            .fa-copy {
+                color: hsl(0, 0%, 0%);
+            }
+        }
+    }
+}
+
 /* This max-width must be synced with message_viewport.is_narrow */
@media (width < $xl_min) {
    .app-main,
--- a/templates/zerver/app/about-zulip.html
+++ b/templates/zerver/app/about-zulip.html
@ -0,0 +1,16 @@
+<div id="about-zulip" class="overlay flex new-style" tabindex="-1" role="dialog" data-overlay="about-zulip"
+  aria-labelledby="about-zulip-label" aria-hidden="true">
+    <div class="overlay-content modal-bg">
+        <button type="button" class="exit" aria-label="{{ _('Close') }}"><span aria-hidden="true">&times;</span></button>
+        <div class="modal-body">
+            <img class="about-zulip-logo" src="/static/images/logo/zulip-icon-128x128.png" alt="" />
+            <div class="about-zulip-title">Zulip</div>
+            <p class="about-zulip-version">
+                {{zulip_version_name}}
+                <i class="fa fa-copy tippy-zulip-tooltip" data-tippy-content="Copy version" data-tippy-placement="right" data-clipboard-text="{{zulip_version}}"></i>
+            </p>
+            <p>
+              Zulip is <a target="_blank" rel="noopener noreferrer" href="https://github.com/zulip/zulip">open-source software</a>.</p>
+        </div>
+    </div>
+</div>
--- a/templates/zerver/app/index.html
+++ b/templates/zerver/app/index.html
@ -173,6 +173,7 @@
    {% include "zerver/app/invite_user.html" %}
    {% include "zerver/app/logout.html" %}
    {% include "zerver/app/deprecation_notice.html" %}
+    {% include "zerver/app/about-zulip.html" %}
    <div id="user-profile-modal-holder"></div>
    <div id="delete-topic-modal-holder"></div>
    <div class="left-sidebar-modal-holder"></div>
--- a/templates/zerver/app/navbar.html
+++ b/templates/zerver/app/navbar.html
@ -104,6 +104,14 @@
                                </a>
                            </li>
                            {% endif %}
+                            {% if development_environment %}
+                            <li role="presentation" id="gear_menu_about_zulip">
+                                <a href="#about-zulip" role="menuitem" class="menuitem-version">
+                                    <span class="white_zulip_icon_without_text"></span>
+                                    <span class="about_zulip_text">{{ _("About Zulip") }}</span>
+                                </a>
+                            </li>
+                            {% endif %}
                            <li class="divider" role="presentation"></li>
                            <li role="presentation">
                                <a href="{{ apps_page_url }}" target="_blank" rel="noopener noreferrer" role="menuitem">
--- a/tools/test-js-with-node
+++ b/tools/test-js-with-node
@ -35,6 +35,7 @@ USAGE = """

 # We do not yet require 100% line coverage for these files:
 EXEMPT_FILES = {
+    "static/js/about_zulip.js",
    "static/js/admin.js",
    "static/js/alert_popup.ts",
    "static/js/archive.js",
--- a/zerver/context_processors.py
+++ b/zerver/context_processors.py
@ -49,6 +49,13 @@ def common_context(user: UserProfile) -> Dict[str, Any]:
    }


+def get_zulip_version_name(zulip_version: str) -> str:
+    if zulip_version.endswith("+git"):
+        return "Zulip " + zulip_version[:-4]
+
+    return "Zulip " + zulip_version
+
+
 def get_realm_from_request(request: HttpRequest) -> Optional[Realm]:
    if hasattr(request, "user") and hasattr(request.user, "realm"):
        return request.user.realm
@ -135,6 +142,8 @@ def zulip_default_context(request: HttpRequest) -> Dict[str, Any]:
        "request_language": get_language(),
    }

+    ZULIP_VERSION_NAME = get_zulip_version_name(ZULIP_VERSION)
+
    context = {
        "root_domain_landing_page": settings.ROOT_DOMAIN_LANDING_PAGE,
        "custom_logo_url": settings.CUSTOM_LOGO_URL,
@ -160,6 +169,7 @@ def zulip_default_context(request: HttpRequest) -> Dict[str, Any]:
        "password_min_length": settings.PASSWORD_MIN_LENGTH,
        "password_min_guesses": settings.PASSWORD_MIN_GUESSES,
        "zulip_version": ZULIP_VERSION,
+        "zulip_version_name": ZULIP_VERSION_NAME,
        "user_is_authenticated": user_is_authenticated,
        "settings_path": settings_path,
        "secrets_path": secrets_path,
--- a/zerver/tests/test_context_processors.py
+++ b/zerver/tests/test_context_processors.py
@ -0,0 +1,8 @@
+from zerver.context_processors import get_zulip_version_name
+from zerver.lib.test_classes import ZulipTestCase
+
+
+class TestContextProcessors(ZulipTestCase):
+    def test_get_zulip_version_name(self) -> None:
+        self.assertEqual(get_zulip_version_name("4.0-dev+git"), "Zulip 4.0-dev")
+        self.assertEqual(get_zulip_version_name("4.0"), "Zulip 4.0")