Change select style (#5645)

* 01 change css file path

* 02 change Select style

frontend/src/components/common/notification.css

@@ -1,126 +0,0 @@
-#notifications {
-  position: relative;
-  width: 32px;
-}
-
-#notice-icon {
-  position: relative;
-  display: block;
-}
-
-@media (max-width: 390px) {
-  #notifications {
-    margin-left: 8px;
-  }
-}
-
-#notifications .title {
-  line-height: 1.5;
-  font-size: 1rem;
-  color: #322;
-  font-weight: normal;
-}
-
-#notifications .sf2-icon-bell {
-  font-size: 24px;
-  line-height: 1;
-  color: #999;
-  vertical-align: middle;
-}
-
-#notifications .num {
-  position: absolute;
-  top: -3px;
-  left: 12px;
-  padding: 0 2px;
-  min-width: 16px;
-  height: 16px;
-  color: #fff;
-  font-size: 9px;
-  line-height: 16px;
-  text-align: center;
-  background: #fc6440;
-  border-radius: 100%;
-}
-
-#notice-popover {
-  top: 38px;
-  right: -12px;
-}
-
-#notice-popover .outer-caret {
-  right: 18px;
-}
-
-#notice-popover a {
-  font-weight: normal;
-}
-
-#notice-popover li {
-  padding: 9px 0 3px;
-  border-bottom: 1px solid #dfdfe1;
-}
-
-#notice-popover li.unread {
-  padding-right: 10px;
-  padding-left: 10px;
-  border-left: 2px solid #feac74;
-}
-
-#notice-popover li.read {
-  padding-right: 10px;
-  padding-left: 10px;
-  border-left: 2px solid transparent;
-}
-
-#notice-popover li:hover {
-  background: #f5f5f7;
-}
-
-#notice-popover li.read:hover {
-  background: #f5f5f7;
-  border-left: 2px solid #dfdfe1;
-}
-
-#notice-popover .avatar {
-  border-radius: 1000px;
-  float: left;
-}
-
-#notice-popover .brief {
-  margin-left: 40px;
-  margin-bottom: 1rem;
-  font-size: 0.8125rem;
-  line-height: 1.5rem;
-}
-
-#notice-popover .time {
-  margin: 0;
-  color: #999;
-  text-align: right;
-  font-size: 0.8125rem;
-  line-height: 1.5rem;
-  clear: both;
-}
-
-#notice-popover .view-all {
-  display: block;
-  padding: 7px 0;
-  text-align: center;
-  color: #a4a4a4;
-}
-
-#notice-popover .sf-popover-close {
-  position: absolute;
-  right: 10px;
-  top: 17px;
-}
-
-#notice-popover .sf-popover-hd {
-  border-bottom: 1px solid #dfdfe1;
-  margin: 0 10px;
-}
-
-#notice-popover .sf-popover-con {
-  max-height: 25rem;
-}

frontend/src/components/common/notification.js

@@ -5,7 +5,7 @@ import { gettext } from '../../utils/constants';
 import NoticeItem from './notice-item';
 import UserNotificationsDialog from '../../user-notifications';
 import { Utils } from '../../utils/utils';
-import './notification.css';
+import '../../css/notification.css';
 
 class Notification extends React.Component {
   constructor(props) {

frontend/src/components/common/select/index.js

@@ -0,0 +1,5 @@
+import SeahubSelect from './seahub-select';
+import { NoGroupMessage } from './no-group-message';
+import { MenuSelectStyle, UserSelectStyle } from './seahub-select-style';
+
+export { SeahubSelect, NoGroupMessage, MenuSelectStyle, UserSelectStyle };

frontend/src/components/common/select/no-group-message.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../../utils/constants';
+
+const NoGroupMessage = (props) => {
+  return (
+    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('Group not found')}</div>
+  );
+};
+
+NoGroupMessage.propTypes = {
+  innerProps: PropTypes.any.isRequired,
+};
+
+export { NoGroupMessage };

frontend/src/components/common/select/seahub-select-style.js

@@ -0,0 +1,49 @@
+const MenuSelectStyle = {
+  option: (provided, state) => {
+    const { isDisabled, isSelected, isFocused } = state;
+    return ({
+      ...provided,
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: isSelected ? '#20a0ff' : (isFocused ? '#f5f5f5' : '#fff'),
+      '.header-icon .dtable-font': {
+        color: isSelected ? '#fff' : '#aaa',
+      },
+    });
+  },
+  control: (provided) => ({
+    ...provided,
+    fontSize: '14px',
+    cursor: 'pointer',
+    lineHeight: '1.5',
+  }),
+  menuPortal:  base => ({ ...base, zIndex: 9999 }),
+  indicatorSeparator: () => {},
+};
+
+const UserSelectStyle = {
+  option: (provided, state) => {
+    const { isDisabled, isFocused } = state;
+    return ({
+      ...provided,
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: isFocused ? '#f5f5f5' : '#fff',
+    });
+  },
+  control: (provided) => ({
+    ...provided,
+    fontSize: '14px',
+    cursor: 'pointer',
+    lineHeight: '1.5',
+  }),
+  indicatorSeparator: () => ({
+    display: 'none',
+  }),
+  dropdownIndicator: () => ({
+    display: 'none',
+  }),
+  clearIndicator: () => ({
+    display: 'none',
+  }),
+};
+
+export { MenuSelectStyle, UserSelectStyle };

frontend/src/components/common/select/seahub-select.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select, { components, createFilter } from 'react-select';
+import { MenuSelectStyle } from './seahub-select-style';
+
+const ClearIndicator = ({ innerProps, ...props }) => {
+  const onMouseDown = e => {
+    e.nativeEvent.stopImmediatePropagation();
+    innerProps.onMouseDown(e);
+  };
+  props.innerProps = { ...innerProps, onMouseDown };
+  return <components.ClearIndicator {...props} />;
+};
+
+ClearIndicator.propTypes = {
+  innerProps: PropTypes.object,
+};
+
+const MenuList = (props) => (
+  <div onClick={e => e.nativeEvent.stopImmediatePropagation()} onMouseDown={e => e.nativeEvent.stopImmediatePropagation()} >
+    <components.MenuList {...props}>{props.children}</components.MenuList>
+  </div>
+);
+
+MenuList.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+};
+
+const Option = props => {
+  return (
+    <div style={props.data.style}>
+      <components.Option {...props} />
+    </div>
+  );
+};
+
+Option.propTypes = {
+  data: PropTypes.shape({
+    style: PropTypes.object,
+  }),
+};
+
+export default class SeahubSelect extends React.Component {
+
+  static propTypes = {
+    isMulti: PropTypes.bool,
+    options: PropTypes.array.isRequired,
+    value: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
+    isSearchable: PropTypes.bool,
+    isClearable: PropTypes.bool,
+    placeholder: PropTypes.string,
+    classNamePrefix: PropTypes.string,
+    form: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    menuPortalTarget: PropTypes.string,
+    menuPosition: PropTypes.string,
+    noOptionsMessage: PropTypes.func,
+    innerRef: PropTypes.object,
+    isDisabled: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    options: [],
+    value: {},
+    isDisabled: false,
+    isSearchable: false,
+    isClearable: false,
+    placeholder: '',
+    isMulti: false,
+    menuPortalTarget: '.modal',
+    noOptionsMessage: () => {
+      return null;
+    },
+  };
+
+  getMenuPortalTarget = () => {
+    return document.querySelector(this.props.menuPortalTarget);
+  };
+
+  render() {
+    const { options, onChange, value, isSearchable, placeholder, isMulti, menuPosition, isClearable, noOptionsMessage,
+      classNamePrefix, innerRef, isDisabled, form } = this.props;
+    return (
+      <Select
+        value={value}
+        isDisabled={isDisabled}
+        ref={innerRef}
+        onChange={onChange}
+        options={options}
+        isMulti={isMulti}
+        classNamePrefix={classNamePrefix}
+        styles={MenuSelectStyle}
+        components={{ Option, MenuList, ClearIndicator }}
+        filterOption={createFilter({
+          matchFrom: 'any',
+          stringify: option => `${option.data.labelValue}`,
+        })}
+        placeholder={placeholder}
+        isSearchable={isSearchable}
+        isClearable={isClearable}
+        menuPosition={menuPosition || 'fixed'} // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
+        menuShouldScrollIntoView
+        menuPortalTarget={this.getMenuPortalTarget()}
+        captureMenuScroll={false}
+        noOptionsMessage={noOptionsMessage}
+        form={form}
+      />
+    );
+  }
+}