a856dd4更新修正v1.0.97

TeamFelNull · Sep 27, 2020 · 79d4bd2 · 79d4bd2
1 parent 065a345
commit 79d4bd2
Show file tree

Hide file tree

Showing 14 changed files with 1,043 additions and 58 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "felnullgdlauncher",
-  "version": "1.0.96",
+  "version": "1.0.97",
   "description": "FelNullGDlauncher is simple, yet powerful Minecraft custom launcher with a strong focus on the user experience",
   "keywords": [
     "minecraft",
@@ -154,7 +154,7 @@
     "husky": "^4.2.5",
     "native-ext-loader": "^2.3.0",
     "neon-cli": "^0.4.0",
-    "prettier": "^2.0.5",
+    "prettier": "^2.1.2",
     "react-scripts": "3.4.3",
     "rimraf": "^3.0.2",
     "terser-webpack-plugin": "^4.1.0",

diff --git a/src/app/desktop/components/Instances/Instance.js b/src/app/desktop/components/Instances/Instance.js
@@ -76,8 +76,8 @@ const InstanceContainer = styled.div`
   font-size: 20px;
   overflow: hidden;
   height: 100%;
-  background: linear-gradient(0deg,rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url("${props =>
-    props.background}") center no-repeat;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
+    url('${props => props.background}') center no-repeat;
   background-position: center;
   color: ${props => props.theme.palette.text.secondary};
   font-weight: 600;

diff --git a/src/app/desktop/components/News.js b/src/app/desktop/components/News.js
@@ -38,7 +38,7 @@ const ImageSlide = styled.div`
   height: 100%;
   width: 100%;
   border-radius: ${props => props.theme.shape.borderRadius};
-  background-image: url("${props => (props.image ? props.image : null)}");
+  background-image: url('${props => (props.image ? props.image : null)}');
   background-position: center;
   background-size: cover;
   transition: transform 0.2s ease-in-out;

diff --git a/src/common/components/ModalsManager.js b/src/common/components/ModalsManager.js
@@ -62,6 +62,9 @@ const modalsComponentLookupTable = {
   BisectHosting: AsyncComponent(lazy(() => import('../modals/BisectHosting'))),
   Onboarding: AsyncComponent(lazy(() => import('../modals/Onboarding'))),
   ModOverview: AsyncComponent(lazy(() => import('../modals/ModOverview'))),
+  ModsChangeLogs: AsyncComponent(
+    lazy(() => import('../modals/ModsChangelogs'))
+  ),
   ModsBrowser: AsyncComponent(lazy(() => import('../modals/ModsBrowser'))),
   JavaSetup: AsyncComponent(lazy(() => import('../modals/JavaSetup'))),
   ModsUpdater: AsyncComponent(lazy(() => import('../modals/ModsUpdater'))),

diff --git a/src/common/modals/InstanceManager/Mods.js b/src/common/modals/InstanceManager/Mods.js
@@ -44,7 +44,22 @@ const RowContainer = styled.div.attrs(props => ({
   style: props.override
 }))`
   width: 100%;
-  background: ${props => props.theme.palette.grey[props.index % 2 ? 700 : 800]};
+  height: 100%;
+  background: ${props =>
+    props.disabled || props.selected
+      ? 'transparent'
+      : props.theme.palette.grey[800]};
+  ${props =>
+    props.disabled &&
+    !props.selected &&
+    `border: 2px solid
+    ${props.theme.palette.colors.red};`}
+  ${props =>
+    props.selected &&
+    `border: 2px solid
+    ${props.theme.palette.primary.main};`}
+  transition: border 0.1s ease-in-out;
+  border-radius: 4px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -60,17 +75,17 @@ const RowContainer = styled.div.attrs(props => ({
   }
   .rowCenterContent {
     flex: 1;
-    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: color 0.1s ease-in-out;
+    color: ${props => props.isHovered && props.theme.palette.primary.main};
     cursor: pointer;
     svg {
       margin-right: 10px;
     }
     &:hover {
-      color: ${props => props.theme.palette.primary.main};
+      color: ${props => props.theme.palette.text.primary};
     }
   }
   .rightPartContent {
@@ -83,6 +98,36 @@ const RowContainer = styled.div.attrs(props => ({
   }
 `;
 
+const RowContainerBackground = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  z-index: -1;
+  ${props =>
+    props.selected &&
+    ` background: repeating-linear-gradient(
+  45deg,
+  ${props.theme.palette.primary.main},
+  ${props.theme.palette.primary.main} 10px,
+  ${props.theme.palette.primary.dark} 10px,
+  ${props.theme.palette.primary.dark} 20px
+  );`};
+  ${props =>
+    props.disabled &&
+    !props.selected &&
+    `background: repeating-linear-gradient(
+  45deg,
+  ${props.theme.palette.colors.red},
+  ${props.theme.palette.colors.red} 10px,
+  ${props.theme.palette.colors.maximumRed} 10px,
+  ${props.theme.palette.colors.maximumRed} 20px
+  );`};
+  filter: brightness(60%);
+  transition: all 0.1s ease-in-out;
+  opacity: ${props => (props.disabled || props.selected ? 1 : 0)};
+`;
+
 const DragEnterEffect = styled.div`
   position: absolute;
   display: flex;
@@ -221,6 +266,7 @@ const toggleModDisabled = async (
 const Row = memo(({ index, style, data }) => {
   const [loading, setLoading] = useState(false);
   const [updateLoading, setUpdateLoading] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
   const curseReleaseChannel = useSelector(
     state => state.settings.curseReleaseChannel
   );
@@ -240,10 +286,30 @@ const Row = memo(({ index, style, data }) => {
     latestMods[item.projectID].releaseType <= curseReleaseChannel;
   const dispatch = useDispatch();
 
+  const name = item.fileName
+    .replace('.jar', '')
+    .replace('.zip', '')
+    .replace('.disabled', '');
+
   return (
     <>
       <ContextMenuTrigger id={item.displayName}>
-        <RowContainer index={index} override={style}>
+        <RowContainer
+          index={index}
+          name={item.fileName}
+          isHovered={isHovered}
+          selected={selectedMods.includes(item.fileName)}
+          disabled={path.extname(item.fileName) === '.disabled'}
+          override={{
+            ...style,
+            top: style.top + 15,
+            height: style.height - 15,
+            position: 'absolute',
+            width: '97%',
+            margin: '15px 0',
+            transition: 'height 0.2s ease-in-out'
+          }}
+        >
           <div className="leftPartContent">
             <Checkbox
               checked={selectedMods.includes(item.fileName)}
@@ -274,7 +340,7 @@ const Row = memo(({ index, style, data }) => {
             }}
             className="rowCenterContent"
           >
-            {item.fileName}
+            {name}
           </div>
           <div className="rightPartContent">
             {isUpdateAvailable &&
@@ -342,10 +408,18 @@ const Row = memo(({ index, style, data }) => {
               icon={faTrash}
             />
           </div>
+          <RowContainerBackground
+            selected={selectedMods.includes(item.fileName)}
+            disabled={path.extname(item.fileName) === '.disabled'}
+          />
         </RowContainer>
       </ContextMenuTrigger>
       <Portal>
-        <ContextMenu id={item.displayName}>
+        <ContextMenu
+          id={item.displayName}
+          onShow={() => setIsHovered(true)}
+          onHide={() => setIsHovered(false)}
+        >
           <MenuItem
             onClick={() => {
               clipboard.writeText(item.displayName);