feat: user theme selector; theme improvements;

classes/utils/GUI.class.php

@@ -145,7 +145,8 @@ public static function scripts()
                     'js/crypter/crypto_app.js',
                     'js/pbkdf2dialog.js',
                     'js/notification.js',
-                    'lib/xregexp/xregexp-all.js'
+                    'lib/xregexp/xregexp-all.js',
+                    'js/theme.js',
         );
 
 

language/en_AU/lang.php

@@ -834,8 +834,12 @@
 $lang['enter_transfer_name'] = 'Enter the transfer name (optional)';
 $lang['files_transferred_display'] = '{filecount}';
 $lang['size_transferred_display'] = '{size_human_readable}';
-$lang['an_initiative_by'] = 'An initiative by';
-
+$lang['an_initiative_by'] = 'FileSender Silver and Gold contributors:';
 $lang['read_only_mode'] = 'This FileSender is in read only mode. You can continue to download existing files but can not upload new files or create new guests at the moment.';
 $lang['auth_sp_attribute_email_hint'] = 'Your authentication system is missing the required email attribute for the user';
+$lang['theme'] = 'Theme';
+$lang['device'] = 'Device';
+$lang['light'] = 'Light';
+$lang['dark'] = 'Dark';
+$lang['theme_info'] = "The theme is only saved in the browser";
 

language/pt_BR/lang.php

@@ -798,4 +798,9 @@
 $lang['go_to_invitations'] = 'Ir para todos os meus convites';
 $lang['optional_message'] = 'Mensagem opcional';
 $lang['enter_transfer_name'] = 'Digite o nome da transferência (opcional)';
-$lang['an_initiative_by'] = 'Uma iniciativa por';
+$lang['an_initiative_by'] = 'Colaboradores do Prata e Ouro do FileSender:';
+$lang['theme'] = 'Tema';
+$lang['device'] = 'Dispositivo';
+$lang['light'] = 'Claro';
+$lang['dark'] = 'Escuro';
+$lang['theme_info'] = 'O tema é salvo somente no navegador';

templates/user_page.php

@@ -83,6 +83,16 @@ function isChecked( $v ) {
                     }
                     ?>
 
+                    <div class='fs-select pt-3'>
+                        <label for='user_theme'>{tr:theme}</label>
+                        <select id="user_theme" name="user_theme">
+                            <option value="device" selected>{tr:device}</option>
+                            <option value="default">{tr:light}</option>
+                            <option value="dark">{tr:dark}</option>
+                        </select>
+                        <small>{tr:theme_info}</small>
+                    </div>
+
                     <div class="fs-switch fs-switch--small">
                         <input id="previous-settings" type="checkbox" name="save_transfer_preferences"  <?php echo isChecked($user->save_transfer_preferences); ?> />
                         <label for="previous-settings">

www/css/default.scss

@@ -9,24 +9,24 @@
 //
 /*
  * FileSender www.filesender.org
- * 
+ *
  * Copyright (c) 2009-2012, AARNet, Belnet, HEAnet, SURFnet, UNINETT
  * All rights reserved.
- * 
+ *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are met:
- * 
+ *
  * *   Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
- * 
+ *
  * *   Redistributions in binary form must reproduce the above copyright
  *     notice, this list of conditions and the following disclaimer in the
  *     documentation and/or other materials provided with the distribution.
- * 
+ *
  * *   Neither the name of AARNet, Belnet, HEAnet, SURFnet and UNINETT nor the
  *     names of its contributors may be used to endorse or promote products
  *     derived from this software without specific prior written permission.
- * 
+ *
  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
@@ -117,10 +117,6 @@ img {
     background: $body-bg;
 }
 
-a {
-    color: #333333;
-}
-
 p {
   margin: 1em;
 }
@@ -139,7 +135,7 @@ abbr {
     width: 90%;
 }
 
-    
+
 div.not_displayed {
     display: none;
 }
@@ -148,10 +144,6 @@ div.not_displayed {
     display: none;
 }
 
-.get_a_link_lock {
-    background: #eeeeff;
-}
-
 .number {
     text-align: right;
 }
@@ -691,7 +683,7 @@ td .desc {
     height: 15em;
     text-align: center;
     max-height: 300em;
-    overflow-y: scroll;   
+    overflow-y: scroll;
 }
 
 
@@ -757,7 +749,7 @@ td .desc {
 }
 
 #upload_form .files_actions {
-    margin: 0.5em -1em 0 -1em; 
+    margin: 0.5em -1em 0 -1em;
 }
 
 #upload_form .files_actions div a {
@@ -1138,7 +1130,7 @@ table.guests .guest .to .errors .details {
     padding-top: 1em;
 }
 .avfile .name {
-    font-size:1.5em;    
+    font-size:1.5em;
     padding-bottom: 1em;
 }
 
@@ -1354,5 +1346,5 @@ table.paginator a {
 }
 
 @import "local-variables.scss";
-             
-                              
+
+

www/css/new-ui/_general.css

@@ -94,6 +94,10 @@ hr {
   background: transparent url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='red'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") center / 1em auto no-repeat !important;
 }
 
+a {
+  color: var(--fs-accent);
+}
+
 /* XS */
 @media (max-width: 575px) {
 

www/css/new-ui/components/_input.css

@@ -57,7 +57,7 @@
 .fs-input-group input,
 .fs-input-group textarea {
   flex: 1;
-  border: 1px solid var(--fs-gray-300);
+  border: 1px solid var(--fs-bg-color-quarternary);
   min-height: var(--fs-spacing-6x);
   background: var(--fs-light);
   border-radius: var(--fs-spacing-base);
@@ -94,7 +94,7 @@
   flex-direction: row;
   align-items: center;
   background: var(--fs-light);
-  border: 1px solid var(--fs-gray-300);
+  border: 1px solid var(--fs-bg-color-quarternary);
   border-radius: var(--fs-spacing-4x);
   font-weight: 700;
   margin-top: var(--fs-spacing-2x);
@@ -158,13 +158,13 @@
   left: 0;
   height: var(--fs-spacing-3x);
   width: var(--fs-spacing-3x);
-  background-color: var(--fs-gray-100);
+  background-color: var(--fs-bg-color-tertiary);
   border-radius: var(--fs-spacing-half);
 }
 
 /* On mouse-over, add a grey background color */
 .fs-checkbox:hover input ~ .fs-checkbox__mark {
-  background-color: var(--fs-gray-300);
+  background-color: var(--fs-bg-color-quarternary);
 }
 
 /* When the checkbox is checked, add a blue background */
@@ -189,7 +189,7 @@
   top: 4.5px;
   width: 7px;
   height: 12px;
-  border: solid white;
+  border: solid var(--fs-bg-color-secondary);
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);

www/css/new-ui/components/_link.css

@@ -50,7 +50,7 @@
     width: var(--fs-spacing-5x);
     border-radius: 100%;
     color: var(--fs-accent) !important;
-    background: var(--fs-blue-100) !important;
+    background: var(--fs-hightlight-bg) !important;
 }
 
 .fs-link--disabled {
@@ -61,5 +61,5 @@
 
 .fs-link--disabled:hover {
     color: var(--fs-accent) !important;
-    background: var(--fs-blue-100) !important;
+    background: var(--fs-hightlight-bg) !important;
 }

www/css/new-ui/components/_progress-bar.css

@@ -18,7 +18,7 @@
   flex: 1;
   height: var(--fs-spacing-2x);
   border-radius: var(--fs-spacing-2x);
-  background: var(--fs-gray-200);
+  background: var(--fs-bg-color-quarternary);
   margin: 0 !important;
 }
 

www/css/new-ui/components/_select.css

@@ -16,7 +16,7 @@
 }
 
 .fs-select select {
-  border: 1px solid var(--fs-gray-300);
+  border: 1px solid var(--fs-bg-color-quinary);
   min-height: var(--fs-spacing-6x);
   padding: 0 var(--fs-spacing-5x) 0 var(--fs-spacing-3x);
   margin-left: var(--fs-spacing-3x);
@@ -26,7 +26,7 @@
   /* Firefox */
   appearance: none;
   /* Safari and Chrome */
-  background-image: linear-gradient(45deg, transparent 50%, var(--fs-gray-300) 50%), linear-gradient(135deg, var(--fs-gray-300) 50%, transparent 50%);
+  background-image: linear-gradient(45deg, transparent 50%, var(--fs-bg-color-tertiary) 50%), linear-gradient(135deg, var(--fs-bg-color-tertiary) 50%, transparent 50%);
   background-position: calc(100% - 20px) calc(1em + 4px), calc(100% - 15px) calc(1em + 4px);
   background-size: 5px 5px, 5px 5px;
   background-repeat: no-repeat;
@@ -40,3 +40,8 @@
 .fs-select--oval select {
   border-radius: var(--fs-spacing-4x);
 }
+
+.fs-select small {
+  padding-left: var(--fs-spacing-3x);
+  font-size: 0.8rem;
+}

www/css/new-ui/components/_switch.css

@@ -27,7 +27,7 @@
 
 .fs-switch label:before {
   background: #fff;
-  border: 1px solid var(--fs-gray-300);
+  border: 1px solid var(--fs-bg-color-quarternary);
   border-radius: 100em;
   content: "";
   height: 34px;
@@ -37,7 +37,7 @@
 }
 
 .fs-switch label:after {
-  background-color: var(--fs-gray-300);
+  background-color: var(--fs-bg-color-quarternary);
   border-radius: 50%;
   content: "";
   height: 28px;

www/css/new-ui/components/_table.css

@@ -21,15 +21,15 @@
 }
 
 .fs-table.fs-table--striped tbody tr:nth-child(odd) {
-  background-color: var(--fs-blue-100);
+  background-color: var(--fs-hightlight-bg);
 }
 
 .fs-table.fs-table--selectable tbody td:not(.actions) {
   cursor: pointer;
 }
 
 .fs-table.fs-table--selectable tbody tr:hover {
-  background-color: var(--fs-blue-200) !important;
+  background-color: var(--fs-hightlight-bg-secondary) !important;
 }
 
 .fs-table__check-action {

www/css/new-ui/pages/_base-page.css

@@ -1,6 +1,6 @@
 .fs-base-page {
     flex: 1;
-    background: var(--fs-light);
+    background: var(--fs-bg-color);
     padding: var(--fs-spacing-6x) var(--fs-spacing-2x);
 }
 

www/css/new-ui/pages/_download.css

@@ -1,6 +1,6 @@
 .fs-download {
     flex: 1;
-    background: var(--fs-light);
+    background: var(--fs-bg-color);
     padding: var(--fs-spacing-6x) var(--fs-spacing-2x);
 }
 

www/css/new-ui/pages/_invitation-detail.css

@@ -1,6 +1,6 @@
 .fs-invitation-detail {
     flex: 1;
-    background: var(--fs-light);
+    background: var(--fs-bg-color);
     padding: var(--fs-spacing-6x) var(--fs-spacing-2x);
 }
 

www/css/new-ui/pages/_invitations.css

@@ -1,6 +1,6 @@
 .fs-invitations {
     flex: 1;
-    background: var(--fs-light);
+    background: var(--fs-bg-color);
     padding: var(--fs-spacing-6x) var(--fs-spacing-2x);
 }
 

www/css/new-ui/pages/_my-transfers.css

@@ -1,9 +1,13 @@
 .fs-my-transfers {
     flex: 1;
-    background: var(--fs-light);
+    background: var(--fs-bg-color);
     padding: var(--fs-spacing-6x) var(--fs-spacing-2x);
 }
 
+.fs-my-transfers table th a {
+    color: var(--fs-text-color);
+}
+
 .fs-my-transfers__title {
     text-align: center;
 }
@@ -31,6 +35,6 @@
     .fs-my-transfers {
         font-size: 0.8rem;
         flex: 1;
-        background: var(--fs-light);
+        background: var(--fs-bg-color);
     }
 }