Sidebar opacity, fix dark theme, and other stuff

FossilOrigin-Name: 9e6dd5bad46fd36aaa7e1cac0b0ac4507b9aafe89613dd98e184040835398c83
2022-07-15 05:24:33 +00:00 · 2022-07-15 05:24:33 +00:00 · 661272026c
parent 65300b6ce8
commit 661272026c
13 changed files with 329 additions and 48 deletions
--- a/dist/treebird-dark.css
+++ b/dist/treebird-dark.css
@ -1,5 +1,4 @@
 /* Dark color overrides */
-
 html
 {
    background-color: #202020;
@ -17,7 +16,7 @@ body

 #navbar
 {
-    border-top: 2px solid #5e5e5e;
+    border-top: 2px solid #4e4e4e;
    background: linear-gradient(#3e3e3e, #262626);
    border-bottom: 1px solid #101010;
 }
@ -50,7 +49,7 @@ a, a:visited, a:hover, a:active

 .sidebar
 {
-    background-color: #222;
+    background-color: rgba(34, 34, 34, var(--sidebar-opacity));
 }

 .btn
@ -76,6 +75,16 @@ a, a:visited, a:hover, a:active
    cursor: pointer;
 }

+.sidebarbtn
+{
+    border: 1px solid transparent;
+}
+
+.sidebarbtn:hover
+{
+    border: 1px solid #505050;
+}
+
 .sidebarbtn, .sidebarbtn:visited
 {
    color: #808080;
@ -147,9 +156,15 @@ select
    border-color: #666;
 }

+select:hover
+{
+    background: linear-gradient(#666, #505050);
+}
+
 .account-sidebar
 {
    background-color: #404040;
+    border-bottom: 1px dashed #505050;
 }

 .header-btn
@ -278,3 +293,191 @@ ul.large-list li .edit-list-btn
    border: 1px solid #515151;
    padding: 3px 7px;
 }
+
+.sidebarbtn-sub
+{
+    color: unset;
+}
+
+
+#leftbar ul.sidebar-config
+{
+    background: linear-gradient(#303030, #202020);
+    color: #cacaca;
+    border-radius: 6px;
+    padding: 4px;
+    margin: 8px;
+    border: 1px solid #505050;
+    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.1);
+}
+
+.sidebarbtn-sub:active, .sidebarbtn-sub:hover
+{
+    background-color: #505050;
+    box-shadow: 0px 1px 0px #606060;
+}
+
+input[type=submit].post-btn
+{
+    
+    background: linear-gradient(#404040, #303030);
+    border: 1px solid #505050;
+}
+
+input[type=submit].post-btn:hover
+{
+    
+    background: linear-gradient(#505050, #404040);
+    border: 1px solid #505050;
+}
+
+.notification-compact
+{
+    scrollbar-color: #404040 transparent;
+}
+
+.notification-compact .notification-content.is-mention
+{
+    color: #f3f3f3;
+}
+
+.notification
+{
+    border-bottom: 1px solid #505050;
+    width: 100%;
+}
+
+.sidebar-embed-container .navigation
+{
+    background-color: rgba(60, 62, 64, .5);
+}
+
+.navigation tr td:not(:last-child), .tabs tr td:not(:last-child)
+{
+    border-right: 1px solid #606060;
+}
+
+.navigation, .tabs
+{
+    box-shadow: 0px 1px 0px #606060;
+}
+
+input[type=range] {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 12px;
+    background: linear-gradient(#404040, #303030);
+    border: 1px solid #505050;
+    border-radius: 4px;
+    outline: none;
+    vertical-align: middle;
+}
+
+input[type=range]::-webkit-slider-thumb,
+input[type=range]::-moz-range-thumb
+{
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #303236;
+    background: linear-gradient(#75777c, #505256);
+    cursor: pointer;
+}
+
+/* Accounts */
+.acct-header
+{
+    z-index: 1;
+    padding-left: 160px;
+    background: linear-gradient(#505053, #303033);
+    border-bottom: 1px solid #202020;
+    background-color: #e8e8e8;
+}
+
+.account-info
+{
+    background: linear-gradient(#28282b, #37373a);
+    border-bottom: 1px solid #202020;
+    color: #cacaca;
+}
+
+.tabs .tab-btn:hover, .tabs .tab-btn:active
+{
+    background: linear-gradient(#404040, #303032);
+}
+
+.tabs .tab-btn.active, .tabs .tab-btn:checked
+{
+    color: #eee;
+    background: linear-gradient(#505052, #404045);
+}
+
+.tabs .tab-btn
+{
+    color: #808080;
+    border-bottom: 2px solid #303030;
+}
+
+.btn-disabled, .btn-disabled:hover
+{
+    background: #252525;
+    color: #606060;
+}
+
+.header-btn:hover, .header-btn:active
+{
+    background: linear-gradient(#5c5c5c,#444);
+}
+
+html, body {
+    scrollbar-color: #303030 #101010;
+}
+
+.file-uploads-container .file-upload
+{
+    overflow: hidden;
+    display: inline-block;
+    width: 200px;
+    margin: 2px 4px;
+    background: linear-gradient(#, #f7f7f7);
+    border: 1px solid #606060;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+}
+
+.file-upload .upload-info {
+    background: linear-gradient(#202020, #101010);
+    border-top: 1px solid #505050;
+    color: #ccc;
+}
+
+.btn-icon
+{
+    border: 1px solid #5f6376;
+    background-color: #757991;
+    text-align: middle;
+    vertical-align: middle;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.btn-icon svg
+{
+    stroke: #ddd;
+}
+
+.btn-icon:hover
+{
+    background-color: #696d82;
+}
+
+.btn-icon:active
+{
+    background-color: #4e5161;
+}
+
+.nav-symbol
+{
+    color: #aaa;
+}
--- a/dist/treebird.css
+++ b/dist/treebird.css
@ -1,3 +1,9 @@
+/* Variables */
+:root
+{
+    --sidebar-opacity: 1.0;
+}
+
 *
 {
    margin: 0;
@ -91,16 +97,8 @@ table.ui-table td
    vertical-align: top;
 }

-#content
-{
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-}
-
 #navbar
 {
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
    border-top: 2px solid #fff;
    background: linear-gradient(#fbfbfb, #ececef);
    width: 1000px;
@ -208,7 +206,7 @@ table.ui-table td
    min-height: 600px;
    max-width: 180px;
    min-width: 180px;
-    background-color: #eaecf0;
+    background-color: rgba(234, 236, 240, var(--sidebar-opacity));
 }

 .sidebar-frame
@ -461,6 +459,29 @@ select:hover
    background: linear-gradient(#f0f0f0, #d0d0d0);
 }

+input[type=range] {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 12px;
+    background: linear-gradient(#f3f3f3, #d5d5d5);
+    border: 1px solid #cacaca;
+    border-radius: 4px;
+    outline: none;
+    vertical-align: middle;
+}
+
+input[type=range]::-webkit-slider-thumb,
+input[type=range]::-moz-range-thumb
+{
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #303236;
+    background: linear-gradient(#75777c, #505256);
+    cursor: pointer;
+}
+
 /*************************************************
 *                  BUTTONS                      *
 *************************************************/
@ -538,6 +559,11 @@ input[type=button], input[type=submit]
    cursor: pointer;
 }

+.btn-icon svg
+{
+    stroke: #ffffff;
+}
+
 .btn-icon:hover
 {
    background-color: #9096b3;
@ -548,13 +574,13 @@ input[type=button], input[type=submit]
    background-color: #747890;
 }

-.post-btn
+input[type=submit].post-btn
 {
    background: linear-gradient(#aa0000, #900000);
    padding: 2px 25px 3px !important;
    font-size: 15px;
    border-radius: 4px;
-    border: none !important; 
+    border: none; 
    color: #fff;
 }

@ -2069,7 +2095,6 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content

 .file-upload-btn svg
 {
-    stroke: #ffffff;
    width: 14px;
    height: 14px;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
@ -2496,7 +2521,7 @@ input[type=submit].chatbox-btn
 {
    transform: rotate(-33deg) skew(-30deg);
    border-radius: 75% 0 75% 75%;
-    margin-left: 31px;
+    margin-left: 28px;
 }

 .is-bun:before, .is-bun:after
@ -2682,6 +2707,7 @@ input[type=submit].chatbox-btn
    {
        padding: 0;
        margin: 0;
+        border-radius: 0px;
    }
    
    #main-page, #navbar
--- a/src/base_page.c
+++ b/src/base_page.c
@ -55,6 +55,8 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t*
    struct mstdnt_storage storage = { 0 };
    struct mstdnt_notification* notifs = NULL;
    size_t notifs_len = 0;
+#define SIDEBAR_CSS_LEN 128
+    char sidebar_css[SIDEBAR_CSS_LEN];

    if (keyint(ssn->cookies.logged_in))
        login_string = "";
@ -131,10 +133,17 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t*
                  ssn->config.theme,
                  ssn->config.themeclr ? "-dark" : "");
    }
-        
+
+    if (ssn->config.sidebar_opacity)
+    {
+        float sidebar_opacity = (float)ssn->config.sidebar_opacity / 255.0f;
+        snprintf(sidebar_css, SIDEBAR_CSS_LEN, ":root { --sidebar-opacity: %.2f; }",
+                 sidebar_opacity);
+    }

    struct index_template index_tmpl = {
        .title = L10N[locale][L10N_APP_NAME],
+        .sidebar_css = sidebar_css,
        .theme_str = theme_str,
        .prefix = config_url_prefix,
        .background_url = background_url_css,
--- a/src/cookie.c
+++ b/src/cookie.c
@ -69,6 +69,7 @@ char* read_cookies_env(struct cookie_values* cookies)
        { "statdope", &(cookies->stat_dope), key_int },
        { "statoneclicksoftware", &(cookies->stat_oneclicksoftware), key_int },
        { "statemojolikes", &(cookies->stat_emojo_likes), key_int },
+        { "sidebaropacity", &(cookies->sidebar_opacity), key_int },
        { "stathidemuted", &(cookies->stat_hide_muted), key_int },
        { "instanceshowshoutbox", &(cookies->instance_show_shoutbox), key_int },
        { "instancepanel", &(cookies->instance_panel), key_int },
--- a/src/cookie.h
+++ b/src/cookie.h
@ -45,6 +45,7 @@ struct cookie_values
    struct key stat_hide_muted;
    struct key instance_show_shoutbox;
    struct key instance_panel;
+    struct key sidebar_opacity;
    struct key notif_embed;
 };

--- a/src/local_config.h
+++ b/src/local_config.h
@ -41,6 +41,7 @@ struct local_config
    int instance_show_shoutbox;
    int instance_panel;
    int notif_embed;
+    int sidebar_opacity;
 };

 #endif // LOCAL_CONFIG_H
--- a/src/local_config_set.c
+++ b/src/local_config_set.c
@ -22,13 +22,13 @@

 #define post_bool_intp(post) (post->is_set ? keypint(post) : 0)

-int set_config_str(struct session* ssn,
-                   char** v,
-                   char* cookie_name,
-                   struct key* post,
-                   struct key* cookie,
-                   enum config_page page,
-                   enum config_page curr_page)
+void set_config_str(struct session* ssn,
+                    char** v,
+                    char* cookie_name,
+                    struct key* post,
+                    struct key* cookie,
+                    enum config_page page,
+                    enum config_page curr_page)
 {
    if (page == curr_page)
    {
@ -47,13 +47,13 @@ int set_config_str(struct session* ssn,
    return 0;
 }

-int set_config_int(struct session* ssn,
-                   int* v,
-                   char* cookie_name,
-                   struct key* post,
-                   struct key* cookie,
-                   enum config_page page,
-                   enum config_page curr_page)
+void set_config_int(struct session* ssn,
+                    int* v,
+                    char* cookie_name,
+                    struct key* post,
+                    struct key* cookie,
+                    enum config_page page,
+                    enum config_page curr_page)
 {
    if (page == curr_page)
    {
@ -77,23 +77,18 @@ int set_config_int(struct session* ssn,
 // Shorthand for the arguments passed into functions below
 #define LOAD_CFG_SIM(strcookie, varname) ssn, &(ssn->config.varname), (strcookie), &(ssn->post.varname), &(ssn->cookies.varname), page

-void load_config(struct session* ssn, mastodont_t* api, enum config_page page)
+struct mstdnt_storage* load_config(struct session* ssn, mastodont_t* api, enum config_page page)
 {
+    struct mstdnt_attachment* attachments = NULL;
+    struct mstdnt_storage* storage = NULL;
+    size_t attachments_len = 0;
    if (ssn->post.set.is_set)
    {
-        struct mstdnt_attachment* attachments = NULL;
-        struct mstdnt_storage* storage = NULL;
-        if (try_upload_media(&storage, ssn, api, &attachments, NULL) == 0)
-        {
-            struct key atm = { .type.s = attachments[0].url, .is_set = 1 };
-            set_config_str(ssn, &(ssn->config.background_url), "background_url", &(atm), &(ssn->cookies.background_url), page, CONFIG_APPEARANCE);
-        }
-
-        if (storage)
-            cleanup_media_storages(ssn, storage);
+        try_upload_media(&storage, ssn, api, &attachments, NULL);
    }
-    if (!ssn->post.set.is_set)
-        ssn->config.background_url = keystr(ssn->cookies.background_url);
+    struct key atm = { .type.s = attachments ? attachments[0].url : NULL, .is_set = attachments ? 1 : 0 };
+    set_config_str(ssn, &(ssn->config.background_url), "background_url", &(atm), &(ssn->cookies.background_url), page, CONFIG_APPEARANCE);
+    set_config_int(LOAD_CFG_SIM("sidebaropacity",       sidebar_opacity), CONFIG_APPEARANCE);
    set_config_str(LOAD_CFG_SIM("theme",                theme), CONFIG_APPEARANCE);
    set_config_int(LOAD_CFG_SIM("themeclr",             themeclr), CONFIG_APPEARANCE);
    set_config_int(LOAD_CFG_SIM("jsactions",            jsactions), CONFIG_GENERAL);
@ -111,4 +106,6 @@ void load_config(struct session* ssn, mastodont_t* api, enum config_page page)
    set_config_int(LOAD_CFG_SIM("notifembed",           notif_embed), CONFIG_GENERAL);
    set_config_int(LOAD_CFG_SIM("interact_img",         interact_img), CONFIG_GENERAL);
    set_config_int(LOAD_CFG_SIM("lang",                 lang), CONFIG_GENERAL);
+
+    return storage;
 }
--- a/src/local_config_set.h
+++ b/src/local_config_set.h
@ -30,7 +30,18 @@ enum config_page
    CONFIG_APPEARANCE,
 };

-int set_config_str(struct session* ssn,
+/*!
+ * Sets a config string
+ *
+ * \param ssn The session to modify
+ * \param v The (config) character pointer to modify
+ * \param cookie_name The cookie name to match
+ * \param post The post value to check
+ * \param cookie The cookie value to store into
+ * \param page The page that this value is expected to be set on.
+ * \param curr_page The page to check against
+ */
+void set_config_str(struct session* ssn,
                   char** v,
                   char* cookie_name,
                   struct key* post,
@ -38,7 +49,18 @@ int set_config_str(struct session* ssn,
                   enum config_page page,
                   enum config_page curr_page);

-int set_config_int(struct session* ssn,
+/*!
+ * Sets a config integer
+ *
+ * \param ssn The session to modify
+ * \param v The (config) integer pointer to modify
+ * \param cookie_name The cookie name to match
+ * \param post The post value to check
+ * \param cookie The cookie value to store into
+ * \param page The page that this value is expected to be set on.
+ * \param curr_page The page to check against
+ */
+void set_config_int(struct session* ssn,
                   int* v,
                   char* cookie_name,
                   struct key* post,
@ -46,6 +68,14 @@ int set_config_int(struct session* ssn,
                   enum config_page page,
                   enum config_page curr_page);

-void load_config(struct session* ssn, mastodont_t* api, enum config_page page);
+/*!
+ * Loads the config and sets the values based on POST or session
+ * 
+ * \param ssn The session
+ * \param api mastodont-c api
+ * \param page Page enum, to ensure that config changes on different pages don't effect other cookies
+ * \return Storage if files were uploaded, must free. This might change
+ */
+struct mstdnt_storage* load_config(struct session* ssn, mastodont_t* api, enum config_page page);

 #endif // LOCAL_CONFIG_SET_H
--- a/src/main.c
+++ b/src/main.c
@ -137,6 +137,7 @@ int main(void)
                .instance_show_shoutbox = 1,
                .instance_panel = 1,
                .notif_embed = 1,
+                .sidebar_opacity = 255,
            },
            .cookies = {{}},
            .post = {{}},
@ -156,7 +157,7 @@ int main(void)
        char* path_info = getenv("PATH_INFO");
        if (path_info && strcmp(path_info, "/config/appearance") == 0)
            page = CONFIG_APPEARANCE;
-        load_config(&ssn, &api, page);
+        struct mstdnt_storage* attachments = load_config(&ssn, &api, page);

        // Load current account information
        get_account_info(&api, &ssn);
@ -170,6 +171,8 @@ int main(void)
        free_files(&(keyfile(ssn.post.files)));
        if (ssn.logged_in) mstdnt_cleanup_account(&(ssn.acct));
        mastodont_storage_cleanup(&(ssn.acct_storage));
+        if (attachments)
+            cleanup_media_storages(&ssn, attachments);

        ++run_count;
    }
--- a/src/query.c
+++ b/src/query.c
@ -118,6 +118,7 @@ char* read_post_data(struct post_values* post)
        { "statemojolikes", &(post->stat_emojo_likes), key_int },
        { "stathidemuted", &(post->stat_hide_muted), key_int },
        { "instanceshowshoutbox", &(post->instance_show_shoutbox), key_int },
+        { "sidebaropacity", &(post->sidebar_opacity), key_int },
        { "instancepanel", &(post->instance_panel), key_int },
        { "notifembed", &(post->notif_embed), key_int },
        { "file", &(post->files), key_files }
--- a/src/query.h
+++ b/src/query.h
@ -64,6 +64,7 @@ struct post_values
    struct key visibility; // String
    struct key instance; // String
    struct key emojoindex; // Int
+    struct key sidebar_opacity; // Int

    // Navigation
    struct key min_id; // String
--- a/static/config_appearance.tmpl
+++ b/static/config_appearance.tmpl
@ -31,6 +31,11 @@
        <input type="file" name="file">
      </li>
    </ul>
+    <ul>
+      <li>
+        Sidebar opacity: <input type="range" name="sidebaropacity" min="0" max="255" value="255">
+      </li>
+    </ul>
    
    <input class="btn btn-single" type="submit" value="Save">
  </form>
--- a/static/index.tmpl
+++ b/static/index.tmpl
@ -8,6 +8,9 @@
    {{ %s : theme_str }}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ %s : title }} is a decentralized social media platform">
+    <style>
+      {{ %s : sidebar_css }}
+    </style>
  </head>
  <body>
    <div id="main-page">