laCour / slack-night-mode

A Stylus style for easy Slack theming
Creative Commons Zero v1.0 Universal
568 stars 386 forks source link

Thread Replies and Hover unstyled #178

Closed glehman3 closed 6 years ago

glehman3 commented 6 years ago

When replying to a thread, both in a channel, in the thread sidebar, or within the All Threads - Reply portion of thread is unstyled.

The Hover mechanism in All Threads also appears to have no style, and highlights with a white overlay when hovering over a thread in All Threads.

strangelights commented 6 years ago

I ran into this issue as well. Interestingly, after testing a different theme found here, I reverted back to this theme using a brand new ssb-interop.js file and the proper dark styling returned to all Reply fields, both in the main channel view and within the thread sidebar.

All Threads continues to display the white hover on mouseover for comments, but I can live with that for now.

Specifically, this is my current ssb-interop.js:

**
 * The preload script needs to stay in regular ole JavaScript, because it is
 * the point of entry for electron-compile.
 */

if (window.location.href !== 'about:blank') {
  const preloadStartTime = process.hrtime();
  const { ipcRenderer, remote } = require('electron');

  ipcRenderer.on('SLACK_SET_DESKTOP_INTEROP_METADATA', (_event, ...args) =>
    args.forEach(({ key, value }) => window[key] = value)
  );

  const { init } = require('electron-compile');
  const { assignIn } = require('lodash');
  const path = require('path');

  const { isPrebuilt } = require('../utils/process-helpers');
  const profiler = require('../utils/profiler.js');

  if (profiler.shouldProfile()) profiler.startProfiling();

  //tslint:disable-next-line:no-console
  process.on('uncaughtException', (e) => console.error(e));

  /**
   * Patch Node.js globals back in, refer to
   * https://electron.atom.io/docs/api/process/#event-loaded.
   */
  const processRef = window.process;
  process.once('loaded', () => {
    window.process = processRef;
  });

  /**
   * loadSettings are just the command-line arguments we're concerned with, in
   * this case developer vs production mode.
   *
   * Note: we are using one of property in loadSettings to call electron-compile init,
   * so can't get rid of calling remote synchronously here.
   */
  const loadSettings = window.loadSettings = assignIn({},
    remote.getGlobal('loadSettings'),
    { windowType: 'webapp' }
  );

  window.perfTimer = assignIn({}, remote.getGlobal('perfTimer'));
  window.perfTimer.PRELOAD_STARTED = preloadStartTime;

  if (!window.perfTimer.isInitialTeamBooted) {
    ipcRenderer.send('SLACK_PRQ_INITIAL_TEAM_BOOTED');
  }

  const resourcePath = path.join(__dirname, '..', '..');
  const mainModule = require.resolve('../ssb/main.ts');
  const isDevMode = loadSettings.devMode && isPrebuilt();

  init(resourcePath, mainModule, !isDevMode);
}

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
   success: function(css) {
     css += `
       div.c-virtual_list__scroll_container {
           background-color: #222222 !important;
       }
       .p-message_pane .c-message_list:not(.c-virtual_list--scrollbar), .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider {
            z-index: 0;
       }
       div.c-message__content:hover {
           background-color: #222222 !important;
       }

       div.c-message:hover {
           background-color: #222222 !important;
       }
     `;
     $("<style></style>").appendTo('head').html(css);
   }
 });
});
strangelights commented 6 years ago

On further review, the above "fix" was nothing more than restarting Slack to push apparent changes made on Slack's end.

All Threads hover issue remains, but try restarting Slack before making any additional changes.